如何在reactjs中选择基于组的复选框antd

Question

我想选择一个基于组的复选框。问题是当我点击组时，整个复选框被选中。我不想选择整个复选框。这是我的初始状态。

const plainOptions = ["can_view", "can_create", "can_update"];
state = {
  checkedList: [],
  indeterminate: true,
  checkAll: false
};

方法：onchange 方法基本上适用于每个单独的复选框。

onChange = checkedList => {
  console.log(checkedList);
  this.setState({
    checkedList,
    indeterminate:
      !!checkedList.length && checkedList.length < plainOptions.length,
    checkAll: checkedList.length === plainOptions.length
  });
};

此方法适用于选中的所有复选框

onCheckAllChange = e => {
  console.log(e.target.checked);
  this.setState({
    checkedList: e.target.checked ? plainOptions : [],
    indeterminate: false,
    checkAll: e.target.checked
  });
};
{
  ["group", "topGroup"].map(item => (
    <div className="site-checkbox-all-wrapper">
      <Checkbox
        indeterminate={this.state.indeterminate}
        onChange={this.onCheckAllChange}
        checked={this.state.checkAll}
      >
        {item}
      </Checkbox>
      <CheckboxGroup
        options={plainOptions}
        value={this.state.checkedList}
        onChange={this.onChange}
      />
    </div>
  ));
}

但是，我接受的数据格式是

{group:["can_view","can_create"],topGroup:["can_view","can_create"}

当用户选中复选框时，我想获得这种格式输出

这里是代码沙箱：https://codesandbox.io/s/agitated-sea-1ygqu

Answer 1

当您单击其中一个组时，两个组都发生变化的原因是两个组使用相同的内部状态。

["group", "topGroup"].map(item => (
  <div className="site-checkbox-all-wrapper">
    <Checkbox
      indeterminate={this.state.indeterminate}
      onChange={this.onCheckAllChange}
      checked={this.state.checkAll}
    >
      {item}
    </Checkbox>
    <CheckboxGroup
      options={plainOptions}
      value={this.state.checkedList}
      onChange={this.onChange}
    />
  </div>
));

group 和 topGroup 使用相同的 this.state.checkList 状态。

---

解决此问题的最简单方法是将每个组提取到自己的组件中。这样他们就有了彼此独立的状态。

---

您也可以选择保留一个组件，但您必须管理多个内部状态。例如，您可以使用state = { checkList: [[], []] }，其中第一个子数组用于存储group 状态，第二个子数组用于存储topGroup 状态。

如果组是动态的，您可以简单地 map 覆盖组并以这种方式创建您的状态：

state = { checkList: groups.map(() => []) };

您还需要管理多个indeterminate 和checkAll 状态。当您从checkList 状态推断出这些时，可以避免这种情况。例如：

isIndeterminate(index) {
  const checkList = this.state.checkList[index];
  return checkList.length > 0 && checkList.length < plainOptions.length;
}

这也可以避免冲突状态，因为只有一个事实来源。