如何在Ant Design复选框组中实现仅允许单选单个选项的功能

要实现Checkbox组仅单选的效果，核心是通过统一的状态变量管理选中项，自动处理选项间的互斥逻辑，修改后代码如下：

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

const category = [
  { label: "Gardening", value: "Gardening" },
  { label: "Plants", value: "Plants" },
  { label: "Seeds", value: "Seeds" },
  { label: "Bulbs", value: "Bulbs" },
  { label: "Planters", value: "Planters" },
];

export default function SideMenus({ sideOpen, setSideOpen }) {
  // 存储当前唯一选中的分类值
  const [selectedCategory, setSelectedCategory] = useState(null);

  const handleCheckChange = (currentValue, isChecked) => {
    if (isChecked) {
      // 选中新选项时直接替换为当前值，自动覆盖之前的选中项
      setSelectedCategory(currentValue);
    } else {
      // 取消当前选中项时清空状态
      setSelectedCategory(null);
    }
  };
 
  return (
      <div className="row">
        {category.map((item) => {
          return (
            <div className="col-sm-12 px-3 py-2" key={item.label}>
              <Checkbox 
                checked={selectedCategory === item.value}
                onChange={(e) => handleCheckChange(item.value, e.target.checked)}
              >
                {item.value}
              </Checkbox>
            </div>
          );
        })}
      </div>
  );
}

逻辑说明 #

• 用selectedCategory状态变量统一管理选中项，同一时间最多只会存一个选项的值
• 每个Checkbox的选中状态由自身值是否等于selectedCategory决定，确保同一时间只有一个选项被选中
• 若你的业务本身就是单选场景，也可以直接使用Ant Design原生的Radio组件，无需额外处理互斥逻辑，若需要Checkbox的视觉样式，自定义覆盖Radio的默认样式即可。

内容的提问来源于stack exchange，提问作者Aaquib