在React/Typescript中处理多个开关控件的函数

import React, { useState } from 'react';

const SwitchControl = () => {
  const [switches, setSwitches] = useState([
    { id: 1, label: 'Switch 1', checked: false },
    { id: 2, label: 'Switch 2', checked: true },
    { id: 3, label: 'Switch 3', checked: false },
  ]);

  const handleSwitchChange = (id: number) => {
    setSwitches(prevSwitches =>
      prevSwitches.map(switchItem =>
        switchItem.id === id ? { ...switchItem, checked: !switchItem.checked } : switchItem
      )
    );
  };

  return (
    <div>
      {switches.map(switchItem => (
        <div key={switchItem.id}>
          <label htmlFor={`switch-${switchItem.id}`}>{switchItem.label}</label>
          <input
            type="checkbox"
            id={`switch-${switchItem.id}`}
            checked={switchItem.checked}
            onChange={() => handleSwitchChange(switchItem.id)}
          />
        </div>
      ))}
    </div>
  );
};

export default SwitchControl;