使用checkboks和reactjs向数组添加/删除元素

import React, { useState } from 'react';

const CheckboxArray = () => {
  const [selectedItems, setSelectedItems] = useState([]);

  const handleCheckboxChange = (event) => {
    const value = event.target.value;
    if (event.target.checked) {
      setSelectedItems([...selectedItems, value]);
    } else {
      setSelectedItems(selectedItems.filter(item => item !== value));
    }
  };

  const handleButtonClick = () => {
    console.log(selectedItems);
    // 或者在这里处理数组中的元素
  };

  return (
    <div>
      <label>
        <input type="checkbox" value="Item 1" onChange={handleCheckboxChange} />
        Item 1
      </label>
      <br />
      <label>
        <input type="checkbox" value="Item 2" onChange={handleCheckboxChange} />
        Item 2
      </label>
      <br />
      <label>
        <input type="checkbox" value="Item 3" onChange={handleCheckboxChange} />
        Item 3
      </label>
      <br />
      <button onClick={handleButtonClick}>Print Selected Items</button>
    </div>
  );
};

export default CheckboxArray;