获取react js中复选框的值

import React, { useState } from 'react';

function CheckboxExample() {
  const [checkedValues, setCheckedValues] = useState([]);

  const handleCheckboxChange = (event) => {
    const value = event.target.value;
    const isChecked = event.target.checked;

    if (isChecked) {
      // 添加选中的值到数组中
      setCheckedValues([...checkedValues, value]);
    } else {
      // 从数组中移除取消选中的值
      setCheckedValues(checkedValues.filter((val) => val !== value));
    }
  };

  return (
    <div>
      <label>
        <input
          type="checkbox"
          value="option1"
          checked={checkedValues.includes('option1')}
          onChange={handleCheckboxChange}
        />
        Option 1
      </label>
      <label>
        <input
          type="checkbox"
          value="option2"
          checked={checkedValues.includes('option2')}
          onChange={handleCheckboxChange}
        />
        Option 2
      </label>
      <label>
        <input
          type="checkbox"
          value="option3"
          checked={checkedValues.includes('option3')}
          onChange={handleCheckboxChange}
        />
        Option 3
      </label>
    </div>
  );
}

export default CheckboxExample;