Question

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

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

单选按钮组件

＆＃13;

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;

＆＃13;

selectField组件

＆＃13;

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;

＆＃13;

textField组件

＆＃13;

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;

＆＃13;

Answer 1

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

在React中，让一个组件中的值影响另一个非子组件的渲染显然很常见。因此，我们必须让组件相互通信。但是，它们无法直接执行此操作，因此所有操作都必须首先移至Main组件，然后返回到族树中以正确呈现您的碎片。这是我要做的流程：

单选按钮值已更改 - ＆gt;发送值到Main（通过prop） - ＆gt;主要更新时，根据新值有条件地呈现不同的组件

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

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

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

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

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

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

当您渲染单选按钮时，您希望将setFieldDisabled作为道具传递给您，以便您可以访问它并且可以通过其修改主要状态子：

<RadioBtn setFieldDisabled={this.setFieldDisabled} />

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

this.props.setFieldDisabled(val);

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

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

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

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

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

1 个答案: