antd Checkbox.Group实现单选

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

radio和checkbox区别:

  1. radio单选,checkbox多选。

  1. 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 (
        <>
             {
                    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;

你可能感兴趣的:(前端,javascript,reactjs,es6)