使用 Material-UI 禁用带有单选按钮的 React 组件

Question

我对 ReactJS 和 Material-UI 还是很陌生。只和那些人一起工作了大约 3 周。我现在正在努力解决的问题是： - 我在一个组中有 2 个单选按钮和 2 个组件（文本字段和选择字段）； - 我想在 selectField 仍然处于活动状态时选中第一个单选按钮时禁用 textField； - 选中第2个单选按钮时，应启用文本字段，应启用SelectField;

提前感谢您提供的任何帮助！ :) 我有以下内容：

单选按钮组件

import React, {Component} from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {RadioButton, RadioButtonGroup} from 'material-ui/RadioButton';





const styles = {
    block: {
        maxWidth: 30,
    },
    radioButton: {
        marginBottom: 16,
        maxWidth: 10,
    },
};


export let disable1=false;
export let disable2=false;
class RadioBtn extends Component {
    
    render() {

        function change()
        {
            if (RadioButtonGroup.valueSelected === "0") {
                disable2 = true;
                disable1 = false;
                return disable1;
            }
            else if (RadioButtonGroup.valueSelected === "1") {
                disable1 = true;
                disable2 = false;
                return disable2;
            }
        }



        return (
            <MuiThemeProvider>
                <div>
                    <RadioButtonGroup name="search" defaultSelected="0" onChange={change()} >
                        <RadioButton
                            value="0"

                            style={styles.radioButton}

                            name="users"
                            className="users"
                        />
                        <RadioButton
                            value="1"
                            style={styles.radioButton}
                            name="team"
                            className="team"
                        />
                    </RadioButtonGroup>


                </div>

            </MuiThemeProvider>

        )
    }

}

export default RadioBtn;

selectField 组件

import React, {Component} from 'react';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import './Team.css';
import {disable2} from '../radioButton/RadioBtn';

const muiTheme3 = getMuiTheme({
    palette: {
        color: 'fff',
        primary1Color: '#005FA8',
        accent1Color: '#fff',
        accent3Color: '#005FA8',
        textColor: '#000',
        alternateTextColor: '#005FA8',
        hintColor: '#ff0000',
        labelColor: '#000',
        floatingLabelText: '#000',
    },
    tableHeaderColumn: {
        textColor: '#000',
        height: 56,
        spacing: 24,
    },

    textField: {
        color: '#000',
    },
    menu: {
        backgroundColor: '#005FA8',
        containerBackgroundColor: '#005FA8',
        borderColor: '#005FA8',
    },
    table: {
        backgroundColor: '#005FA8',
        borderColor: '#005FA6',
    },
    icon: {
        color: '#000',
    },
});

const styles = {
    customWidth: {
        width: 500,

    },
};
class Team extends Component {

    state = {
        value: 1,
    };

    handleChange = (event, index, value) => this.setState({value});

    render() {

        return (
            <MuiThemeProvider muiTheme={muiTheme3}>
            <div id="div-color">
                <SelectField
                    // floatingLabelText="Team" floatingLabelStyle={{color: '#000', fontSize: 20}}

                             menuItemStyle={{backgroundColor: '#005FA8'}}
                             listStyle={{backgroundColor: '#005FA8', containerBackgroundColor: '#005FA8'}}
                             underlineStyle={{borderColor: '#000'}}
                             maxHeight={300}
                             value={this.state.value}
                             onChange={this.handleChange}
                             style={styles}
                             disabled={disable2}

                >
                    <MenuItem value={1} selected disabled primaryText="Select a team" />
                    <MenuItem value={2} primaryText="Team1" />
                    <MenuItem value={3} primaryText="Team2" />
                    <MenuItem value={4} primaryText="Team3" />
                    <MenuItem value={5} primaryText="Team4" />
                    <MenuItem value={6} primaryText="Team5" />
                    <MenuItem value={7} primaryText="Team6" />
                    <MenuItem value={8} primaryText="Team7" />
                    <MenuItem value={9} primaryText="Team8" />
                    <MenuItem value={10} primaryText="Team9" />
                    <MenuItem value={11} primaryText="Team10" />
                    <MenuItem value={12} primaryText="Team11" />
                    <MenuItem value={13} primaryText="Team12" />
                    <MenuItem value={14} primaryText="Team13" />
                    <MenuItem value={15} primaryText="Team14" />
                    <MenuItem value={16} primaryText="Team15" />


                </SelectField>
            </div>
            </MuiThemeProvider>
        );
    }
}

export default Team;

textField 组件

import React, {Component} from 'react';
import MenuItem from 'material-ui/MenuItem';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import TextField from 'material-ui/TextField';
import test from '../selectComponent/SelectComponent';
import {disable1} from '../radioButton/RadioBtn';
// let disable1 = false;
// disable1 = test;


const styles = {
    errorStyle: {
        borderColor: 'red',
        color: 'red',
    },
    underlineStyle: {
        borderColor: "#000",
    },
    underlineFocusStyle: {
        borderColor: "#005FA8",
    },
    floatingLabelStyle: {
        color: '#000',
    },
    floatingLabelFocusStyle: {
        color: '#000',
    },
    hintStyle: {
        color: '#000',
    }
};


class Users extends Component {


    render (){


        return (
            <MuiThemeProvider>
            <div>

                <TextField
                    hintText="Search for a user"
                    underlineFocusStyle={styles.underlineFocusStyle}
                    underlineStyle={styles.underlineStyle}
                    errorStyle={styles.errorStyle}
                    hintStyle={styles.hintStyle}
                    disabled={disable1}
                />

            </div>
            </MuiThemeProvider>
        )
    }}

export default Users;

Answer 1

我还没有使用 Material UI，但我认为这可以通过让 React 组件正确地相互通信来解决。我假设您的单选按钮组、textField 和 selectField 是单个组件下的兄弟（例如，我将使用名称“Main”）。

在 React 中，一个组件中的值影响另一个非子组件的渲染显然很常见。因此，我们必须让组件相互通信。然而，他们不能直接这样做，所以一切都必须先移动到主组件，然后再回到家族树以正确渲染你的作品。这是我要做的流程：

Radio Buttons Value Changed -> Send value to Main (via prop) -> Main 更新时，根据新值有条件地渲染不同的组件

因此，我们需要做的第一件事是存储是否应启用该字段。在 Main 中，我们将从初始化一个布尔变量开始：

constructor(){
    super();
    this.state = {
        textFieldDisabled: false
    };
}

此外，我们需要一个方法来修改该值，我们最终将其作为道具传递给单选按钮组件：

setFieldDisabled(val){
    this.setState ({
        textFieldDisabled: val
    });
}

在这里，我们将在构造函数方法中添加以下内容，以确保 setFieldDisabled() 绑定到 Main 组件：

this.setFieldDisabled= this.setFieldDisabled.bind(this);

当您渲染单选按钮时，您需要将 setFieldDisabled 作为道具传递，这样您就可以访问它并能够通过其子级修改 Main 的状态：

<RadioBtn setFieldDisabled={this.setFieldDisabled} />

继续您的 RadioBtn 组件，可能在您的 change() 方法中，您可以调用它收到的道具，即目标的 Main 方法。在这里，您将编写逻辑以确定是否应显示文本字段，然后将该值发送回 Main 使用：

this.props.setFieldDisabled(val);

现在我们有了一个变量，Main 的所有子组件都可以轻松访问它。我们要做的最后一件事是将该值从 Main 传递给 textField 组件：

<textField disabled={this.state.textFieldDisabled} />

在该组件中，您将使用 {this.props.disabled} 作为 TextField 中 disabled 的值。您也可以对 selectField 组件执行相同的操作，并修改您传递给 Main 的值，尽管从它的声音来看，我认为这里只有 textField 组件被打开和关闭。希望对您有所帮助！

如果您想完全渲染不同的组件，也可以查看conditional rendering。