typescript antd使用组件checkbox 可以单选可以全选

在TypeScript中，Ant Design (AntD) 提供了一个名为 `Checkbox` 的组件，它支持单选和全选的功能。使用 AntD 的 Checkbox 组件时，你可以通过设置 `value` 属性来控制选项的状态。以下是如何实现单选和全选的简单示例：

**单选模式**：

import { Checkbox } from 'antd';

const options = ['Option 1', 'Option 2', 'Option 3'];

function MyComponent() {
  const [selectedValue, setSelectedValue] = React.useState<string | null>(null);

  const handleChange = (e: any) => {
    if (options.length === 1 && e.target.checked) {
      setSelectedValue(options[0]);
    } else {
      setSelectedValue(null);
    }
  };

  return (
    <div>
      {options.map((option, index) => (
        <Checkbox
          key={index}
          value={option}
          checked={selectedValue === option}
          onChange={() => handleChange(option)}
        >
          {option}
        </Checkbox>
      ))}
    </div>
  );
}

在这个例子中，`handleChange` 函数会确保只有一个选项被选中。

**全选/反选模式**：
要实现全选功能，通常会添加一个额外的复选框用于切换所有其他选项的状态，并监听它的状态变化：

import { Checkbox, Button } from 'antd';

const options = ['Option 1', 'Option 2', 'Option 3'];
const allCheckboxes = new Set<string>();

function handleAllChange(checked: boolean) {
  if (checked) {
    allCheckboxes.clear();
    options.forEach(option => allCheckboxes.add(option));
  } else {
    allCheckboxes.clear();
  }
}

function MyComponent() {
  // ...

  return (
    <div>
      {/* 单选项 */}
      {options.map((option, index) => (
        <Checkbox
          key={index}
          value={option}
          checked={allCheckboxes.has(option)}
          onChange={() => handleChange(option)}
        >
          {option}
        </Checkbox>
      ))}

      {/* 全选按钮 */}
      <Button type="primary" onClick={() => handleAllChange(!allCheckboxes.size)}>
        {allCheckboxes.size > 0 ? '取消选择全部' : '全选'}
      </Button>
    </div>
  );
}

这里我们创建了一个 `allCheckboxes` 集合来跟踪是否选择了所有选项。当用户点击“全选”按钮时，会更新这个集合并相应地改变每个单选框的选中状态。