如何在 Ant Design 中仅选中一组复选框中的单个复选框？

Question

我正在使用 Antdesign checkBox 制作一部分过滤器，用户可以在其中 select 不同的参数来显示数据。


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 }) {
 
  return (
      <div className="row">
        {category.map((item) => {
          return (
            <div className="col-sm-12 px-3 py-2">
              <Checkbox key={item.label}>
                {item.value}
              </Checkbox>
            </div>
          );
        })}
      </div>
  );
}

Answer 1

为了选中一组复选框中的单个复选框，您必须通过 value 属性获取值，onChange 属性获取值，以及 checked 属性仅检查选定的单个值。

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 [value, setValue] = useState("");

 function handleChange(checkedValues) {
   setValue(checkedValues.target.value);
 }
 return (
     <div className="row">
       {category.map((item) => {
         return (
           <div className="col-sm-12 px-3 py-2">
             <Checkbox
               key={item.label}
               onChange={handleChange}
               checked={item.value == value}
               value={item.value}
             >
               {item.value}
             </Checkbox>
           </div>
         );
       })}
     </div>
 );
}

如何在 Ant Design 中仅选中一组复选框中的单个复选框？

How to checked only single checkbox from group of checkboxes in ant design?

reactjs

ant-design-pro