如何在蚂蚁设计中只检查一组复选框中的单个复选框？

Question

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

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>
 );
}