antd design procomponents 使用ProFormCheckbox.Group写一个完整的能全选和反选的组件

在Ant Design Pro中，你可以使用`ProForm`提供的`ProFormCheckbox.Group`来创建一个可以全选和反选的复选框组组件。首先，你需要安装必要的依赖，如果你还没有安装，可以在项目目录下运行：

npm install @ant-design/pro-form @ant-design/icons // 如果还没安装

然后，你可以创建一个名为`CheckAllCheckboxGroup.js`的文件，并编写如下代码：

import { Form, Input, Button, Space } from 'antd';
import { CheckAllOutlined } from '@ant-design/icons';

const { Checkbox, CheckboxGroup } = Form;

class CheckAllCheckboxGroup extends React.Component {
  state = {
    checkedKeys: [], // 存储所有选中的key
    allChecked: false, // 是否全部选中
  };

  // 全选操作
  handleSelectAll = (e) => {
    const checkedKeys = this.props.data.map((item) => item.key); // 获取所有选项的keys
    this.setState({
      checkedKeys,
      allChecked: true,
    });
  };

  // 反选操作
  toggleAll = () => {
    const currentCheckedKeys = this.state.checkedKeys;
    if (!currentCheckedKeys.length) {
      this.setState({ allChecked: false });
    } else {
      this.setState((prevState) => ({
        checkedKeys: [],
        allChecked: false,
      }));
    }
  };

  render() {
    const { options } = this.props; // 假设options是从父组件传入的数组，包含key和label

    return (
      <div>
        {/* 控制是否显示“全选”按钮 */}
        {this.state.allChecked ? (
          <Button onClick={this.toggleAll} icon={<CheckAllOutlined />} disabled={!options.length}>
            取消全选
          </Button>
        ) : (
          <Button onClick={this.handleSelectAll} icon={<CheckAllOutlined />} type="primary">
            全部选中
          </Button>
        )}
        
        {/* 使用ProFormCheckbox.Group */}
        <Form.Item
          label="选择项"
          name="checkList"
          rules={[
            { required: true, message: '请选择一些选项' },
          ]}
        >
          <Checkbox.Group
            value={this.state.checkedKeys}
            onChange={(value) => this.setState({ checkedKeys: value })}
            options={options.map((option) => ({ ...option, key: option.key }))}
          />
        </Form.Item>

        {/* 显示已选择的选项数量 */}
        <Space direction="vertical">
          已选择: {this.state.checkedKeys.length}/{options.length}
        </Space>
      </div>
    );
  }
}

export default CheckAllCheckboxGroup;

// 使用示例
<CheckAllCheckboxGroup data={[{ key: '1', label: 'Option 1' }, { key: '2', label: 'Option 2' }, ...]} />

这个组件会展示一个全选/取消全选按钮以及一个可以根据用户交互动态更新的复选框列表。当点击全选按钮时，所有的复选框会被选中；点击取消全选则会取消所有选中的状态。