javascript - （反应）如何在变异状态后使复选框 UI 看起来被选中？

Question

如何更改 CheckBox 组件的 UI？状态按照我的意愿进行了细微的变化，但是在 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} />
);

标签： javascriptreactjsstateconcat

Answer 1

您需要包含选中的属性，并且可以使用状态来处理它。比方说"isChecked"。

例子：

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

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

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