遇到一个需求,想要把radio的选中框样式变成打勾的样式。换一种思路就是,可以用checkbox组件,控制onChange事件,让其实现单选。
radio和checkbox区别:
radio单选,checkbox多选。
radio选中之后不能取消,checkbox可以
Checkbox.Group实现单选的实现方式:
import { Checkbox } from 'antd';
import React, { useState } from 'react';
const options = [
{
label: "符合",
value: 0
},
{
label: "部分符合",
value: 1
},
{
label: "全部符合",
value: 2
}
];
const App: React.FC = () => {
const [chkSelectIndex, setChkSelectIndex] = useState([1]);
return (
<>
<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;
});
console.log('tmpArr-->',tmpArr);
setChkSelectIndex(tmpArr);
}
}}
/>
</>
)
}
export default App;