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

Question

我对ReactJS和Material-UI很陌生。 与这些只工作了大约3个星期。 我现在正在努力解决的问题是：-我在一个组中有2个单选按钮和2个组件（文本字段和选择字段）； -我想在selectField仍处于活动状态时选中第一个单选按钮时禁用textField； -当选中第二个单选按钮时，应启用textField并应启用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中，使一个组件中的值影响另一个非子组件的呈现显然很常见。 因此，我们必须使这些组件相互通信。 但是，他们不能直接这样做，因此一切都必须先移至Main组件，然后再向下移入族谱以正确渲染您的作品。 这是我要执行的流程：

单选按钮值已更改->将值发送到Main（通过prop）-> Main更新时，将根据新值有条件地渲染不同的组件

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

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

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

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

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

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

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

<RadioBtn setFieldDisabled={this.setFieldDisabled} />

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

this.props.setFieldDisabled(val);

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

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

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

如果您想一起渲染不同的组件，也可以查看条件渲染 。