使用Material-ui togglebuttons在Reactjs中动态创建和处理多个ToggleButtons

npm install @material-ui/core

import React, { useState } from 'react';
import { ToggleButton, ToggleButtonGroup } from '@material-ui/core';

const ToggleButtonsExample = () => {
  const [selected, setSelected] = useState([]);

  const handleToggle = (event, newSelected) => {
    setSelected(newSelected);
  };

  return (
    <ToggleButtonGroup value={selected} onChange={handleToggle}>
      {/* 在这里动态创建ToggleButtons */}
    </ToggleButtonGroup>
  );
};

const options = ['Option 1', 'Option 2', 'Option 3'];

return (
  <ToggleButtonGroup value={selected} onChange={handleToggle}>
    {options.map((option) => (
      <ToggleButton key={option} value={option}>
        {option}
      </ToggleButton>
    ))}
  </ToggleButtonGroup>
);

const handleToggle = (event, newSelected) => {
  setSelected(newSelected);
  console.log(newSelected);
};