如何使用React useState挂钩将复选框列表中的多个值放入状态

import React, { useState } from 'react';

function CheckboxList() {
  const [checkedValues, setCheckedValues] = useState([]);
  // checkedValues是状态数组，setCheckedValues是更新状态的函数
  // 初始状态为空数组
}

function handleCheckboxChange(value) {
  if (checkedValues.includes(value)) {
    // 如果状态数组中已经包含该值，则从数组中移除
    setCheckedValues(checkedValues.filter(item => item !== value));
  } else {
    // 如果状态数组中不包含该值，则将其添加到数组中
    setCheckedValues([...checkedValues, value]);
  }
}

function CheckboxList() {
  // 状态定义和更新函数省略...
  
  const checkboxList = ['选项1', '选项2', '选项3']; // 复选框列表数据
  
  return (
    <div>
      {checkboxList.map((item, index) => (
        <label key={index}>
          <input
            type="checkbox"
            value={item}
            checked={checkedValues.includes(item)}
            onChange={() => handleCheckboxChange(item)}
          />
          {item}
        </label>
      ))}
    </div>
  );
}