React与MaterialUI中分组复选框全选联动功能实现问题

我有多组独立工作的复选框，每组对应一个仅控制本组的全选开关。目前用两个状态分别管理全选开关和单个复选框的选中状态，可通过event.target.value识别点击的复选框以单独控制，但在以下两个功能上遇到困难：

1. 开启全选开关时，本组所有复选框均选中；关闭时均取消选中
2. 手动逐个勾选完本组所有复选框时，全选开关自动开启；取消任意一个复选框时，全选开关自动关闭

当前代码：

const [active, setActive] = useState(false)
const [singleactive, setSingleActive] = useState([])

const handleSwitch = (e) => {
  if(e.target.value === "Select All") {
    setActive(e.target.checked)
    setSingleActive([...singleactive])
  } else {
    setSingleActive([])
  }
}

const handleSingleSwitch = (e) => {
  const index = singleactive.indexOf(e.target.value)

  if(index === -1) {
    setSingleActive([...singleactive, e.target.value])
  } else {
    setSingleActive(singleactive.filter((singleactive) => singleactive !== e.target.value))
  }
}  

核心问题是当前状态未按组隔离，且全选/反选逻辑未正确关联本组所有选项。以下是修正后的实现思路和代码：

1. 按组管理状态 #

将状态改为按组存储，确保每组的全选状态和选中项独立：

import { useState } from 'react';

// 定义每组的选项（可根据实际需求调整）
const checkboxGroups = [
  {
    groupId: 'fruitGroup',
    label: '水果',
    options: ['苹果', '香蕉', '橙子']
  },
  {
    groupId: 'animalGroup',
    label: '动物',
    options: ['猫', '狗', '兔子']
  }
];

export default function Filter() {
  // 初始化每组的状态：全选状态、已选中项数组
  const [groupStates, setGroupStates] = useState(() => 
    checkboxGroups.map(group => ({
      groupId: group.groupId,
      isAllSelected: false,
      selectedItems: []
    }))
  );

2. 实现全选/反选逻辑 #

点击全选开关时，直接将本组所有选项设置为选中或清空：

const handleSelectAll = (groupId, isChecked) => {
    setGroupStates(prevStates => 
      prevStates.map(state => {
        if (state.groupId !== groupId) return state;
        // 获取当前组的所有选项
        const groupOptions = checkboxGroups.find(g => g.groupId === groupId).options;
        return {
          ...state,
          isAllSelected: isChecked,
          selectedItems: isChecked ? [...groupOptions] : []
        };
      })
    );
  };

3. 实现单个复选框选中逻辑 #

每次操作单个复选框后，检查已选中项数量是否等于本组总选项数，自动更新全选状态：

const handleSingleSelect = (groupId, itemValue, isChecked) => {
    setGroupStates(prevStates => 
      prevStates.map(state => {
        if (state.groupId !== groupId) return state;
        
        let updatedSelectedItems;
        if (isChecked) {
          updatedSelectedItems = [...state.selectedItems, itemValue];
        } else {
          updatedSelectedItems = state.selectedItems.filter(item => item !== itemValue);
        }

        // 判断是否所有选项都被选中
        const groupOptions = checkboxGroups.find(g => g.groupId === groupId).options;
        const isAllSelected = updatedSelectedItems.length === groupOptions.length;

        return {
          ...state,
          selectedItems: updatedSelectedItems,
          isAllSelected: isAllSelected
        };
      })
    );
  };

4. 渲染代码 #

return (
    <div className="filter-container">
      {checkboxGroups.map(group => {
        const currentState = groupStates.find(s => s.groupId === group.groupId);
        return (
          <div key={group.groupId} className="checkbox-group">
            <h3>{group.label}</h3>
            {/* 全选开关 */}
            <label>
              <input
                type="checkbox"
                checked={currentState.isAllSelected}
                onChange={(e) => handleSelectAll(group.groupId, e.target.checked)}
              />
              全选
            </label>
            {/* 单个复选框 */}
            {group.options.map(option => (
              <label key={option} className="single-checkbox">
                <input
                  type="checkbox"
                  checked={currentState.selectedItems.includes(option)}
                  onChange={(e) => handleSingleSelect(group.groupId, option, e.target.checked)}
                  value={option}
                />
                {option}
              </label>
            ))}
          </div>
        );
      })}
    </div>
  );
}

关键说明 #

• 状态隔离：每组拥有独立的isAllSelected和selectedItems，避免多组之间的状态干扰
• 全选关联：全选操作直接覆盖本组的已选中项数组，确保所有选项同步状态
• 自动更新全选状态：单个复选框操作后，通过对比已选中项数量和总选项数，自动切换全选开关的状态

内容的提问来源于stack exchange，提问作者LOTUSMS