使用id或其他属性而不是名称的React复选框状态

import React, { useState } from 'react';

const Checkbox = ({ id, label }) => {
  const [checked, setChecked] = useState(false);

  const handleCheckboxChange = () => {
    setChecked(!checked);
  };

  return (
    <div>
      <input
        type="checkbox"
        id={id}
        checked={checked}
        onChange={handleCheckboxChange}
      />
      <label htmlFor={id}>{label}</label>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <Checkbox id="checkbox1" label="Option 1" />
      <Checkbox id="checkbox2" label="Option 2" />
      <Checkbox id="checkbox3" label="Option 3" />
    </div>
  );
};

export default App;