Ant design 清空列表所有选中的checkbox

Ant Design的Checkbox组件有一个checked属性，可以用来表示是否选中。如果要清空列表中所有选中的checkbox，可以通过以下方法：

1. 给每个Checkbox组件设置一个独特的key属性，以便能够在父组件中访问到它们。

2. 在父组件中维护一个状态，用来保存哪些Checkbox被选中了。可以使用一个数组来保存选中的Checkbox的key值。

3. 在每个Checkbox的onChange事件中，将它的key值添加到选中的数组中，或从数组中移除。

4. 在父组件中添加一个“清空”按钮，当点击时，将选中的数组清空。

以下是示例代码：

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

const CheckboxList = () => {
  const [checkedList, setCheckedList] = useState([]);

  const handleCheckboxChange = (key) => {
    if (checkedList.includes(key)) {
      setCheckedList(checkedList.filter(item => item !== key));
    } else {
      setCheckedList([...checkedList, key]);
    }
  }

  const handleClearAll = () => {
    setCheckedList([]);
  }

  const checkboxList = [
    { key: '1', label: 'Checkbox 1' },
    { key: '2', label: 'Checkbox 2' },
    { key: '3', label: 'Checkbox 3' },
  ];

  return (
    <>
      {checkboxList.map(item => (
        <Checkbox
          key={item.key}
          checked={checkedList.includes(item.key)}
          onChange={() => handleCheckboxChange(item.key)}
        >
          {item.label}
        </Checkbox>
      ))}
      <Button onClick={handleClearAll}>Clear All</Button>
    </>
  );
}

export default CheckboxList;