React中点击Switch如何实现所有动态Checkbox全选/全不选

问题现象 #

点击控制开关时，预期将所有复选框统一切换为全选中/全不选中状态，现有代码实际效果为对每个复选框的原有状态单独取反，无法实现统一状态控制。

原有代码逻辑问题 #

• 开关选中分支错误使用!el.yes做状态取反，没有统一将所有项设为选中
• 开关取消选中分支直接保留项原有状态，没有统一将所有项设为未选中
• 初始化和更新时直接操作原始静态数据源，容易引发状态污染

修复后完整代码 #

import "./styles.css";
import React, { useState, useEffect } from "react";
import Checkbox from "@mui/material/Checkbox";
import Switch from "@mui/material/Switch";

interface dataProps {
  name: string;
  yes: boolean;
}

const initialData = [
  { name: "a", yes: false },
  { name: "b", yes: true },
  { name: "c", yes: true },
  { name: "d", yes: false }
];

export default function App() {
  const [list, setList] = useState<Array<dataProps>>([]);

  // 开关触发全选/全不选
  const handleToggleAll = (event: React.ChangeEvent<HTMLInputElement>) => {
    const isAllChecked = event.target.checked;
    setList(list.map(item => ({
      ...item,
      yes: isAllChecked
    })));
  };

  // 单个复选框状态修改（按需保留）
  const handleItemCheck = (targetIndex: number) => {
    setList(list.map((item, index) => 
      index === targetIndex ? {...item, yes: !item.yes} : item
    ));
  };

  useEffect(() => {
    // 初始化时拷贝原始数据，避免直接修改静态源
    setList(initialData.map(item => ({...item})));
  }, []);

  return (
    <div className="App">
      <Switch onChange={handleToggleAll} />
      {list.map((item, index) => (
        <Checkbox
          checked={item.yes}
          key={item.name}
          onChange={() => handleItemCheck(index)}
        />
      ))}
    </div>
  );
}

关键修改点 #

• 全选开关逻辑直接读取自身选中状态，将所有列表项的yes字段统一赋值为和开关一致的布尔值，不再做取反操作
• 补充单个复选框的状态更新逻辑，支持单独勾选/取消某一项
• 初始化和更新时对数据做浅拷贝，避免污染原始静态数据源
• 列表渲染使用唯一的name字段作为key，替代索引值，符合React最佳实践

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