React针对多个复选框全选

import React, { useState } from 'react';

const CheckboxList = () => {
  const [checkedItems, setCheckedItems] = useState({});

  const handleCheckboxChange = (event) => {
    const { name, checked } = event.target;
    setCheckedItems({ ...checkedItems, [name]: checked });
  };

  const handleCheckAll = (event) => {
    const { checked } = event.target;
    const updatedCheckedItems = {};

    // 更新所有复选框的选择状态
    Object.keys(checkedItems).forEach((item) => {
      updatedCheckedItems[item] = checked;
    });

    setCheckedItems(updatedCheckedItems);
  };

  const checkboxData = [
    { id: 1, name: 'Checkbox 1' },
    { id: 2, name: 'Checkbox 2' },
    { id: 3, name: 'Checkbox 3' },
  ];

  return (
    <div>
      <label>
        <input type="checkbox" onChange={handleCheckAll} /> 全选
      </label>
      {checkboxData.map((checkbox) => (
        <div key={checkbox.id}>
          <label>
            <input
              type="checkbox"
              name={checkbox.name}
              checked={checkedItems[checkbox.name] || false}
              onChange={handleCheckboxChange}
            />{' '}
            {checkbox.name}
          </label>
        </div>
      ))}
    </div>
  );
};

export default CheckboxList;