typescript antdsidn 使用 checkbox组件全选，单选复写框代码

在TypeScript中，使用Ant Design库（antd）创建Checkbox组件的全选、单选或多选功能，你需要先安装antd和typescript相关的依赖。假设你想实现一个全选按钮可以控制所有Checkbox的状态，你可以这样做：

import React, { useState } from 'react';
import { Checkbox, Button } from 'antd';

const CheckboxGroup = ({ options }) => {
  const [allChecked, setAllChecked] = useState(false);

  const handleSelectAll = (event) => {
    if (event.target.checked) {
      setAllChecked(true);
      // 如果你想让所有的选项都勾选，遍历options并调用onChange
      options.forEach((option) => option.onChange(true));
    } else {
      setAllChecked(false);
      // 同样，如果取消全选，遍历清空状态
      options.forEach((option) => option.onChange(false));
    }
  };

  return (
    <>
      <Button type="primary" onClick={handleSelectAll}>
        全选
      </Button>
      <Checkbox.Group size="small">
        {options.map((option, index) => (
          <Checkbox key={index} onChange={(e) => option.onChange(e.target.checked)}>
            {option.label}
          </Checkbox>
        ))}
      </Checkbox.Group>
    </>
  );
};

// 例子中的选项数组
const options = [
  { value: 'a', label: 'Option A', onChange: () => console.log('Option A changed') },
  { value: 'b', label: 'Option B', onChange: () => console.log('Option B changed') },
  // 添加更多的选项...
];

export default CheckboxGroup;

在这个例子中，`handleSelectAll`函数会被全选按钮触发，它会同步设置`allChecked`状态，并通过`onChange`事件更新每个Checkbox的状态。