如何在react上显示复选框值

import React, { useState } from 'react';

function CheckboxExample() {
  const [checkboxValues, setCheckboxValues] = useState([]);

  // 处理复选框改变事件
  const handleCheckboxChange = (event) => {
    const { value, checked } = event.target;
    if (checked) {
      // 复选框被选中
      setCheckboxValues([...checkboxValues, value]);
    } else {
      // 复选框被取消选中
      const updatedValues = checkboxValues.filter((val) => val !== value);
      setCheckboxValues(updatedValues);
    }
  };

  return (
    <div>
      <label>
        <input type="checkbox" value="Option 1" onChange={handleCheckboxChange} />
        Option 1
      </label>
      <label>
        <input type="checkbox" value="Option 2" onChange={handleCheckboxChange} />
        Option 2
      </label>
      <label>
        <input type="checkbox" value="Option 3" onChange={handleCheckboxChange} />
        Option 3
      </label>

      <p>Selected values: {checkboxValues.join(', ')}</p>
    </div>
  );
}

export default CheckboxExample;