typescript antd checkbox全选代码

在 TypeScript 中使用 Ant Design（AntD）库创建一个支持全选功能的 Checkbox 组，你可以这样做：

import { Checkbox, Form } from 'antd';

// 假设这是你的数据源
interface DataItem {
  key: string;
  name: string;
}

const data: DataItem[] = ['Option 1', 'Option 2', 'Option 3'];

class CheckboxExample extends React.Component<any, any> {
  state = { checkedKeys: [] };

  onChange = (checkedKeys: string[]) => {
    this.setState({ checkedKeys });
    // 如果需要触发全选操作，可以添加以下代码
    if (!checkedKeys.length) {
      this.selectAll();
    }
  }

  selectAll = () => {
    this.setState(prevState => ({ checkedKeys: [...prevState.checkedKeys, ...data.map(item => item.key)] }));
  }

  render() {
    return (
      <Form>
        <Checkbox.Group checkedKeys={this.state.checkedKeys} onChange={this.onChange}>
          {data.map((item, index) => (
            <Checkbox key={index}>{item}</Checkbox>
          ))}
        </Checkbox.Group>
        <button onClick={this.selectAll}>全选</button>
      </Form>
    );
  }
}

export default CheckboxExample;

在这个例子中，`onChange`函数处理了勾选框状态的变化，当点击全选按钮时，会调用`selectAll`方法将所有选项都设置为已选。`checkedKeys`数组用于存储当前选中的项。