选中/取消选中复选框时管理状态- React

import React, { useState } from 'react';

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

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

  return (
    <div>
      <label>
        <input
          type="checkbox"
          name="item1"
          checked={checkedItems.item1 || false}
          onChange={handleCheckboxChange}
        />
        Item 1
      </label>
      <br />
      <label>
        <input
          type="checkbox"
          name="item2"
          checked={checkedItems.item2 || false}
          onChange={handleCheckboxChange}
        />
        Item 2
      </label>
      <br />
      <label>
        <input
          type="checkbox"
          name="item3"
          checked={checkedItems.item3 || false}
          onChange={handleCheckboxChange}
        />
        Item 3
      </label>
    </div>
  );
}

export default CheckboxList;