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

import React, { useState } from 'react';

function CheckboxList() {
  const [items, setItems] = useState([]);
  const [selectedItems, setSelectedItems] = useState([]);

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

  const handleAdd = () => {
    setItems([...items, ...selectedItems]);
    setSelectedItems([]);
  };

  const handleRemove = (item) => {
    setItems(items.filter(i => i !== item));
  };

  return (
    <div>
      <h2>Available Items</h2>
      <ul>
        {['Apple', 'Banana', 'Cherry'].map((item, index) => (
          <li key={index}>
            <input
              type="checkbox"
              value={item}
              onChange={handleCheckboxChange}
            />
            {item}
          </li>
        ))}
      </ul>

      <button onClick={handleAdd}>Add Selected Items</button>

      <h2>Added Items</h2>
      <ul>
        {items.map((item, index) => (
          <li key={index}>
            {item}
            <button onClick={() => handleRemove(item)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default CheckboxList;