如何在reactjs中选择所有基于复选框的组答案

【问题标题】：how to select All checkbox based group in reactjs如何在reactjs中选择所有基于复选框的组
【发布时间】：2023-03-03 14:24:02
【问题描述】：

我为选择单个复选框做了初始状态。这是我的初始状态

     this.state = {
          fruites: [
            { id: 1 , value: "banana", isChecked: false },
            { id: 2, value: "apple", isChecked: false },
            { id: 3,value: "mango", isChecked: false },
            { id: 4, value: "grap", isChecked: false }
          ]
        };
      }

方法：我只是这个用于选中所有复选框

      handleAllChecked = id => event => {
        let fruites = this.state.fruites;
        fruites.forEach(fruite => {
          data.filter(item => 
              fruite.isChecked = event.target.checked;

          });
        });
        this.setState({ fruites: fruites });
      };

我只是这个方法用于单个复选框。

      handleCheckChieldElement = event => {
        let fruites = this.state.fruites;
        fruites.forEach(fruite => {
          if (fruite.value === event.target.value)
            fruite.isChecked = event.target.checked;
        });
        this.setState({ fruites: fruites });
      };

渲染：这是我的 UI，我想根据 group 选择 All 复选框。例如，我有两组值 - 例如 Group ， Topgroup。问题是，当我点击组时，它会选择所有复选框，包括 Topgroup 并且我点击香蕉，它会选择所有香蕉，我不想在点击一个项目时得到所有香蕉。当我在组上选择时，我不想获得 topgroup 复选框。

            {[{ id: 1, name: "group" }, { id: 2, name: "topGropup" }].map(item => (
              <div>
                <input
                  type="checkbox"
                  onChange={this.handleAllChecked(item.id)}
                  value="checkedall"
                />{" "}
                {item.name}
                <ul>
                  {this.state.fruites.map((fruite, index) => {
                    return (
                      <CheckBox
                        key={index}
                        handleCheckChieldElement={this.handleCheckChieldElement}
                        {...fruite}
                      />
                    );
                  })}
                </ul>
              </div>
            ))}
          </div>

我该如何解决这个问题。这是我的代码框：https://codesandbox.io/s/react-multi-select-checkbox-or6ko

【问题讨论】：

标签： javascript arrays reactjs object checkbox

【解决方案1】：

在这里，我编辑了您的代码框：https://codesandbox.io/s/react-multi-select-checkbox-bbuky

基本上你有 8 个复选框，尽管它显示了 4 个项目，但每个组都重复。

我在你的状态中添加了 4 个缺失的项目，但你实际上需要某种工厂函数，让你可以根据你拥有的组创建你的状态。

我不得不编辑你的一些值，因为你依赖的东西现在不再是唯一的了，比如 value 并使用组的 id 例如创建一个唯一标识符 groupId-itemId。

【讨论】：