遇到一个需求,想要把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;