React antd 树组件自定义父子节点交互逻辑(包括全选,半选,全不选三种状态)使用checkStrictly使父子节点状态不再受控

有一种需求是单独选中父节点,而子节点不选中的情况,如图:

React antd 树组件自定义父子节点交互逻辑(包括全选,半选,全不选三种状态)使用checkStrictly使父子节点状态不再受控_第1张图片

所以父节点要有三种状态可控制,点击父节点,先出现半选状态,再点击是全选状态, 之后点击就是全不选状态,所以有那么几种逻辑:

1. 父节点选中为半选状态,子节点不选中;

2. 父节点选中为勾选状态,子节点全部勾选;

3. 父节点取消选中,子节点全部取消勾选;

4. 子节点全部勾选,子节点最近一级的父节点是全选状态(再上一级根据旗下的子节点是否全选进行判断,以此类推...);

5. 子节点全部取消勾选,父节点不取消,呈半选状态。

梳理一下代码的大概逻辑:

先使用checkStrictly使父子节点状态不再受控,checkedKeys属性有两个参数可以用来控制全选和半选状态(checked是所有勾选中的id,halfChecked是半选的id),通过setCheckedKeys来控制状态即可。

React antd 树组件自定义父子节点交互逻辑(包括全选,半选,全不选三种状态)使用checkStrictly使父子节点状态不再受控_第2张图片

打印出的参数就是这样:

React antd 树组件自定义父子节点交互逻辑(包括全选,半选,全不选三种状态)使用checkStrictly使父子节点状态不再受控_第3张图片

 接下来贴代码:

注:菜单树的数据我没有贴出来,涉及公司机密,数据就是树形数据形式。


 
const [checkedKeys,setCheckedKeys] = useState([]); //控制状态


const onCheck = (checkedKeys, event) => {
    const { checked, halfChecked, children, key } = event.node; // 从参数解构出需要用到的数据
    const {
        checked: selectChecked, // 把checked存进selectChecked
        haldChecked: halfSelectChecked, // 把haldChecked存进halfSelectChecked
    } = checkedKeys;
    // 开始判断有无子节点(children)的node
    if(children && children.length > 0){
        // 有children
        if(!checked && !halfChecked){
            // 半选
            const nodes = getFathersById(event.node.key, treeInfo, 'id').filter(
         

你可能感兴趣的:(前端,javascript,开发语言)