（React）如何在变异状态后使复选框UI看起来被检查？

Question

如何更改CheckBox组件的UI？ State按照我的要求进行了精确的变换，但是在onCheck调用之后（单击它时）复选框看起来没有被检查。

我想我必须为输入对象创建或使用现有的道具：

    onCheck = item => {
        this.setState(prevState => ({
      usage: prevState.usage.concat(item.label, ",")
        }));
        //Todo: Display as checked
      };



    {checkboxes.map(item => (
                  <div className="d-inline-block w-50 p">
                    <CheckBox
                      name={item.name}
                      onChange={this.onCheck.bind(this, item)}
                    />
                    <label key={item.key}>{item.label}</label>
                  </div>
                ))}


    const CheckBox = ({ type = "checkbox", name, checked = false, onChange    }) => (
  <input type={type} name={name} checked={checked} onChange={onChange} />
);

Answer 1

欢迎来到社区，您需要将check true / false传递给CheckBox组件

<CheckBox 
name={item.name}
checked={this.state.usage.includes(item.label)}
onChange={this.onCheck.bind(this, item)}
/>

你也不需要在concat中包含'，'，因为它正在创建一个数组参考链接以供参考https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat

Answer 2

您需要包含checked属性，并且可以使用状态来处理它。让我们说"isChecked"。

例：

<CheckBox checked={this.state.isChecked} \> (+ your previously added properties)

你可以在你的函数中包含这样的东西：

this.setState((prevState) => { isChecked: !prevState.isChecked});