typescript antd checkbox全选复写框代码

在 TypeScript 中，Ant Design (antd) 提供了一个名为 Checkbox 的组件，它允许我们创建复选框列表。如果你想实现一个全选按钮控制整个列表的选择状态，可以这样做：

首先，你需要安装 Ant Design 和它的 TypeScript 支持包，如果还没有安装，可以在项目目录下运行 `npm install @ant-design/components @types/react @types/react-dom`。

然后，你可以创建一个自定义的 Checkbox 组件，并添加一个全选按钮的功能。以下是简化的示例代码：

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

interface Props {
  options: string[];
}

const CustomCheckbox: React.FC<Props> = ({ options }) => {
  const [allChecked, setAllChecked] = useState(false);
  const [selectedOptions, setSelectedOptions] = useState<string[]>([]);

  const toggleAll = () => {
    if (allChecked) {
      setSelectedOptions([]);
    } else {
      setSelectedOptions(options);
    }
    setAllChecked(!allChecked);
  };

  const handleChange = (e: any, value: boolean) => {
    if (!value) {
      // 如果取消了某个选项，则清空已选项
      setSelectedOptions([]);
      return;
    }

    const newSelectedOptions = [...selectedOptions, e.target.value];
    setSelectedOptions(newSelectedOptions);
    // 更新allChecked状态
    setAllChecked(selectedOptions.length === options.length);
  };

  return (
    <div>
      {/* 全选按钮 */}
      <Button type="primary" onClick={toggleAll}>
        {allChecked ? '全选' : '取消全选'}
      </Button>

      {/* 复选框列表 */}
      <Checkbox.Group
        options={options.map((option, index) => ({
          key: index,
          value: option,
          defaultChecked: allChecked || selectedOptions.includes(option),
        }))
        onChange={handleChange}
      />
    </div>
  );
};

export default CustomCheckbox;

在这个例子中，`toggleAll`函数负责切换所有选项的状态，`handleChange`则处理单个复选框的变化并更新所有已选项的状态。