React antd组件Checkbox.Group单选实现

dsysama

关注

阅读 44

2022-09-10


前言

在做项目过程中,发现需要用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);
}
}}
/>
</>



精彩评论(0)

0 0 举报