如何在React中选中/取消选中复选框列表

Question

我有一个room页面，并且在该页面中有一个与该房间相连的传感器列表，可以使用复选框选择这些传感器，如下所示：

<div className="checkboxRowContent">
  {sensors.map(s => {
    return (
      <div className="checkboxElementWrapper" key={s.id}>
        <label htmlFor={`sensor${s.id}`}>
          <div className="checkboxLabel">
            <Link to={`/sensors/edit/${s.id}`}>{s.name}</Link>
          </div>
          <input
            type="checkbox"
            id={`sensor${s.id}`}
            name="sensorId"
            value={s.id}
            checked={s.roomId === values.id}
            onChange={handleCheckbox}
          />
          <span className="checkbox" />
        </label>
      </div>
    );
  })}
</div>

问题是-这种方法禁止我取消选中该复选框（因此，如果在db中该传感器连接到该房间，就是这样）。我该如何重写它，以便可以选中/取消选中此复选框？

Answer 1

你有handleCheckBox一个受控组件。我们看不到您在事件处理程序中做了什么，但是当它受到控制时，您可以通过更改传感器数组（如果处于状态/属性中）来检查它，因此s.roomId === values.id将是正确的。

如果您不希望它受到控制，您可能可以使用defaultChecked它来以不同的方式使用它。

请参阅https://reactjs.org/docs/forms.html#control-components