MUI:跟踪多个复选框状态

import React, { useState } from 'react';
import { Checkbox, FormControlLabel } from '@mui/material';

const CheckboxGroup = () => {
  const [checkboxes, setCheckboxes] = useState({
    checkbox1: false,
    checkbox2: false,
    checkbox3: false,
  });

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

  return (
    <div>
      <FormControlLabel
        control={
          <Checkbox
            checked={checkboxes.checkbox1}
            onChange={handleCheckboxChange}
            name="checkbox1"
          />
        }
        label="Checkbox 1"
      />
      <FormControlLabel
        control={
          <Checkbox
            checked={checkboxes.checkbox2}
            onChange={handleCheckboxChange}
            name="checkbox2"
          />
        }
        label="Checkbox 2"
      />
      <FormControlLabel
        control={
          <Checkbox
            checked={checkboxes.checkbox3}
            onChange={handleCheckboxChange}
            name="checkbox3"
          />
        }
        label="Checkbox 3"
      />
    </div>
  );
};

export default CheckboxGroup;