antd tree checkbox 单选

主要实现一下antd tree checkbox单选功能

antd 的checkbox 功能分为三个状态, 如果要用antd tree 的checkbox 实现单选功能 搜索了一圈都没用很好的实现方式, 我这里记录一下我自己的想法, 可以利用 tree 的titleRender 方法 配合checkbox 实现单选功能

 const [selectNode, setSelectNode] = useState({
        id: ''
    });
    
const onSelect = (_, e) => {
        setSelectNode(e.node)
    }

const titleRender = (nodeData: any) => {
        nodeData.value = (
            <div className='TreeBody'>
                <div className='TreeLeft'>
                    <i className='Lable'></i>
                    <span>{nodeData.name}</span>

                </div>
            </div>
        );
        if (nodeData.level !== 1) {
            return (
                <div>
                    <Checkbox checked={nodeData.id === selectNode?.id} />
                    &ensp;
                    {nodeData.name}
                </div>
            )
        }
        return <div>{nodeData.name} </div>
    }
    
<Tree
 onSelect={onSelect}
fieldNames={{title:'name', key:'id', children: 'childIssueLibList'}}
treeData={TreeData}
 titleRender={titleRende}  />

可以通过这种方式来实现单选,也一样可以拿到当前选中的值, 有这个需求的时候比较方便