Question

我使用Material UI复选框组件，并尝试切换状态onCheck，在控制台状态更改但不在UI中，复选标记不切换。我弄得一团糟。

class CheckboxInteractivity extends React.Component {

    state = {
        switched: false,
    }

    componentWillMount() {
        const {checked} = this.props
        if (checked) {
            this.setState({
                switched: true,
            })
        }
    }

    handleChange = (event, switched) => {
        this.setState({switched: !this.state.switched})
    }

    render () {
        const {switched} = this.state

        return <Checkbox
            label="Label"
            checked={switched}
            onCheck={this.handleChange}
            {...this.props}
                />
    }
}

CheckboxInteractivity.propTypes = {
    checked: PropTypes.bool,
}

export default CheckboxInteractivity

组件

<CheckboxInteractivity /> 
//working correctly
<CheckboxInteractivity checked/>
//not working

Answer 1

不使用第二种情况的原因是：

return <Checkbox
            label="Label"
            checked={switched}
            onCheck={this.handleChange}
            {...this.props}
       />

将成为：

return <Checkbox
            label="Label"
            checked={switched}
            onCheck={this.handleChange}

            checked={true}                     //here

       />

您使用两个checked属性，第二个将复选框选中为真，无论state变量是什么原因。删除{...this.props}它将按预期工作。

为什么它在第一种情况下工作的是，你没有传递checked所以checkbox将只找到一个选中的密钥，它将基于此呈现组件。

此处{...this.props}不是必需的，因为您已将值存储在state中。

<强>建议：

而不是在props生命周期方法中的state中设置componentWillMount值，而不是仅在constructor中设置，如下所示：

constructor(props){
    super(props);
    this.state = {
        switched: props.checked || false,
    }
}

<强>更新

我们假设您在props中传递了很多值，并且要在组件中覆盖的值很少，因此您需要在此处执行的操作首先应用所有props属性，然后定义其他属性。通过这种方式，组件属性将覆盖props属性。

像这样：

return <Checkbox
            {...this.props}                //first apply props values then other
            label="Label"
            checked={switched}
            onCheck={this.handleChange}                
       />

复选框状态不切换。材质UI反应

1 个答案: