反应复选框组/单个复选框

Question

我正在构建我的应用程序的一部分，允许用户通过使用复选框来选择某些项目。我的目标是在组件状态 (this.state.schoolsSelected) 中有一个数组，该数组在单击事件时进行编辑，以存储所有选定的值 onChange，然后提交该数组。

有 5 个复选框部分选项代表学校的类型（elem、middle、high 等），然后每个学校单独呈现一个复选框。我的最终目标是获取所有选中复选框的所有值。

我在处理组件状态的不同场景时遇到了问题，希望其他人之前已经解决了这个问题。

我当前的解决方案是让每个复选框都使用其“已选中”属性表示学校组作为其选中状态（即 this.state.isMiddleChecked、this.state.isHighChecked）。当我选择“全选中学”之类的复选框时，所有中学都被选中。

return(
      <Col key={index} sm={3}>
        <Checkbox
          checked={this.state.isHighChecked}
          value={index}
          onChange={this.onChange}
        >{school.name}</Checkbox>
      </Col>
    )

但是，我无法单独选择任何复选框，因为它们依赖于此组属性。

如果您需要对我的要求进行任何澄清，请告诉我。

Answer 1

如何添加一个新属性（如 id、class 或任何给定名称），您可以选择所有单独分组的复选框？