Ant design 用多个Checkbox实现单选

在 Ant Design 中使用多个 Checkbox 实现单选时，需要在每个 Checkbox 上添加一个 onChange 事件处理程序，并通过 state 中的一个变量来记录选中的 Checkbox 的值。

以下是一个示例代码：

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

const options = ['Option A', 'Option B', 'Option C'];

const App = () => {
  const [selectedOption, setSelectedOption] = useState('');

  const handleCheckboxChange = (e) => {
    setSelectedOption(e.target.value);
  };

  return (
    <div>
      {options.map((option) => (
        <Checkbox
          key={option}
          value={option}
          checked={selectedOption === option}
          onChange={handleCheckboxChange}
        >
          {option}
        </Checkbox>
      ))}
    </div>
  );
};

export default App;

在上面的代码中，我们首先定义了一个 options 数组来存储选项列表。然后，我们使用 useState 钩子来创建一个名为 selectedOption 的状态变量，并将其初始值设置为空字符串。

接下来，我们定义了一个名为 handleCheckboxChange 的事件处理程序，它将在每个 Checkbox 的 onChange 事件触发时被调用。该事件处理程序使用 e.target.value 属性来获取所选选项的值，并将其更新到 selectedOption 状态变量中。

最后，我们使用 map 方法遍历 options 数组，并为每个选项创建一个 Checkbox 组件。我们将每个选项的值作为 value 属性传递给 Checkbox 组件，并将选中状态设置为 selectedOption 状态变量与当前选项值相等时为 true。我们还将 handleCheckboxChange 事件处理程序传递给 onChange 属性，以便在每次选择时更新 selectedOption 状态变量。

通过这种方式，我们可以使用多个 Checkbox 实现单选功能。当用户选择一个选项时，其他选项的选中状态将自动取消。