React antd组件Checkbox.Group单选实现

前言

在做项目过程中，发现需要用checkbox实现radio单选效果。checkbox组件本身不提供，需要自己在onchang事件中自己定义。

实现代码

const [chkSelectIndex, setChkSelectIndex] = useState([1]);

const options = [
    {
        label: "正在运行",
        value: 0
    },
    {
        label: "全部",
        value: 1
    }
];

<>
  <Checkbox.Group
      options={options}
      defaultValue={[1]}
      value={chkSelectIndex}
      onChange={index => {
          const selectData = [...chkSelectIndex];
          console.log(selectData, index);
          if (index.length === 0) {
              setChkSelectIndex(selectData);
          } else {
              const tmpArr = index?.filter(item => {
                  return selectData.indexOf(item) === -1;
              });
              setChkSelectIndex(tmpArr);
          }
      }}
  />
</>

实现效果

React antd组件Checkbox.Group单选实现-小何博客前言在做项目过程中，发现需要用checkbox实现radio单选效果。checkbox组件本身不提供，需要自己在onchang事件中自己定义。 实现代码const [chkSelectIndex, setChkSelectIndex] = useState([1]);c…https://ligo100.cn/qianduanjishu/340.html