如何在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;
}

這也將避免沖突狀態，因為只有一個事實來源。