javascript - React Checkbox Group/Individual 复选框

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 或任何给定的名称)，您可以选择所有单独分组的复选框？