复选框状态未切换。Material UI React。

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 

- Palaniichuk Dmytro

Answer 1

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

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

Will become:

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

            checked={true}                     //here

       />

你使用了两个 checked 属性，第二个会始终将复选框的选中状态设为 true，而不考虑 state 变量。因此，请删除 {...this.props}，它将按预期工作。

为什么第一个例子可以正常工作呢？因为你没有传递 checked，所以 checkbox 只会找到一个 checked 键，并根据该键来渲染组件。

这里不需要 {...this.props}，因为你已经将值存储在 state 中。

建议改进：不要在 componentWillMount 生命周期方法中设置 props 值，而应该直接在 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}                
       />

- Mayank Shukla

---

只有一个问题，如果我想尝试添加禁用属性，我需要使用 {...this.props}，因为基于这个属性，我设置样式<CheckboxInteractivity checked/>。 - Palaniichuk Dmytro

@PalaniichukDmytro，请查看更新的答案，更新部分。您只需要先应用“props”值，然后再应用其他值，排序即可解决您的问题 :) - Mayank Shukla

Answer 2

在使用两个值相互依赖的 Mui 复选框时，我遇到了这个问题。

我有一个“父状态”，我试图在两个复选框中使用它。我使用上下文提供程序提供了这个状态。

解决方案

我通过在两个复选框组件中初始化单独的状态 const [checked, setChecked] = useState(false) 来解决了这个问题。我这样做是为了防止“不受控制”的组件初始化。

为了将“已选中”状态绑定到父状态，我定义了一个简单的 useEffect() 函数。

像这样：

export const DrugUsageStartCheckBox = () => {
    const { t } = useTranslation();
    // parent state can be used only if component is wrapped to context provider.
    const {state, dispatch} = useParentState();
    const [checked, setChecked] = useState(false)

    useEffect(() => {
        setChecked(state.checked)
    }, [state.checked])

    return (
            <Checkbox
                id={'my-checkbox'}
                checked={checked}
                onChange={(e) => {
                    dispatch({type: "toggleChecked"})
                }}
    ...

- Viljami