用antd design + ts写一个带有key值的多选框组，可以实现全选

当使用 Ant Design 和 TypeScript 来创建带有 key 值的多选框组，并实现全选功能时，你可以按照以下步骤进行操作：

1. 首先，确保你已安装并正确导入了 `antd` 组件库以及相关依赖。

2. 在你的组件中，创建一个状态变量来保存选中的复选框值以及全选状态。同时，定义一个选项列表数组，每个选项都包含一个唯一的 key 值。

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

   const options = [
     { key: 'option1', label: 'Option 1' },
     { key: 'option2', label: 'Option 2' },
     { key: 'option3', label: 'Option 3' },
   ];

   const CheckboxGroupExample: React.FC = () => {
     const [checkedList, setCheckedList] = useState<string[]>([]);
     const [indeterminate, setIndeterminate] = useState<boolean>(false);
     const [checkAll, setCheckAll] = useState<boolean>(false);

     // 处理单个复选框的选中
     const handleCheckboxChange = (checkedValues: string[]) => {
       setCheckedList(checkedValues);
       setIndeterminate(!!checkedValues.length && checkedValues.length < options.length);
       setCheckAll(checkedValues.length === options.length);
     };

     // 处理全选框的选中
     const handleCheckAllChange = (e: React.ChangeEvent<HTMLInputElement>) => {
       const checked = e.target.checked;
       setCheckedList(checked ? options.map(option => option.key) : []);
       setIndeterminate(false);
       setCheckAll(checked);
     };

     return (
       <div>
         <div style={{ borderBottom: '1px solid #E9E9E9' }}>
           <Checkbox
             indeterminate={indeterminate}
             onChange={handleCheckAllChange}
             checked={checkAll}
           >
             全选
           </Checkbox>
         </div>
         <br />
         <Checkbox.Group options={options} value={checkedList} onChange={handleCheckboxChange} />
       </div>
     );
   };

   export default CheckboxGroupExample;

在上面的示例中，我们定义了一个选项列表数组 `options`，每个选项都包含一个 `key` 值和一个显示的 `label`。然后，我们使用 `useState` 钩子来创建了三个状态变量：`checkedList` 用于保存选中的复选框值，`indeterminate` 用于控制全选框的中间状态，`checkAll` 用于控制全选框的选中状态。

我们还定义了两个处理函数：`handleCheckboxChange` 处理单个复选框的选中，`handleCheckAllChange` 处理全选框的选中。在 `handleCheckboxChange` 中，我们更新了选中的复选框值，并根据选中的数量来更新全选框的状态。在 `handleCheckAllChange` 中，我们根据全选框的选中状态来更新所有复选框的值，并更新全选框的状态。

3. 最后，在你的页面或应用中使用这个组件即可。

   import React from 'react';
   import CheckboxGroupExample from './CheckboxGroupExample';

   const App: React.FC = () => {
     return (
       <div>
         <CheckboxGroupExample />
       </div>
     );
   };

   export default App;

在上面的示例中，我们在主应用组件中使用 `CheckboxGroupExample` 组件。

这样就创建了一个带有 key 值的多选框组，并实现了全选功能。你可以根据实际需求调整选项列表和样式。

希望这能帮到你！如果还有其他问题，请随时提问。