antd Checkbox.Group实现单选

遇到一个需求，想要把radio的选中框样式变成打勾的样式。换一种思路就是，可以用checkbox组件，控制onChange事件，让其实现单选。

radio和checkbox区别：

1. radio单选，checkbox多选。

2. 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;