ReactJS中的多个复选框选项

import React, { useState } from 'react';

function CheckboxOptions() {
  const [checkedItems, setCheckedItems] = useState({}); // 存储选中的复选框状态

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

  return (
    <div>
      <label>
        <input
          type="checkbox"
          name="option1"
          checked={checkedItems.option1 || false}
          onChange={handleCheckboxChange}
        />
        Option 1
      </label>

      <label>
        <input
          type="checkbox"
          name="option2"
          checked={checkedItems.option2 || false}
          onChange={handleCheckboxChange}
        />
        Option 2
      </label>

      <label>
        <input
          type="checkbox"
          name="option3"
          checked={checkedItems.option3 || false}
          onChange={handleCheckboxChange}
        />
        Option 3
      </label>
    </div>
  );
}

export default CheckboxOptions;