React计算antd的TreeSelect组件所选中的子节点数量

antd的TreeSelect组件在处理例如公司层级、学科系统、分类目录等等的树形选择需求时很好用。

在使用这个组件时，咱们每每须要获取所选中的全部节点以及所选中的全部子节点的数量。

查看TreeSelect的api找到了组件的选中回调方法onChange

在理解onChange方法的参数含义前，要先知道TreeSelect组件的数据格式

onChange方法有三个参数，value表示所选中的节点的value字段值，label表明所选中的节点的title字段值。而最后一个extra参数是获取所选中子节点数量的关键，它是一个Object对象。

经过查看extra的数据，找到了allCheckedNodes这个字段。这个字段里放置着全部被选中的节点的数据。其格式以下

[
    {
        "node":{
            "key":"1",
            "ref":null,
            "props":{
                "title":"全体老师",
                "value":"1",
                "children":[
                    {
                        "key":"1-1",
                        "ref":null,
                        "props":{
                            "title":"老师1",
                            "value":"1-1",
                            "children":[

                            ]
                        },
                        "_owner":null,
                        "_store":{

                        }
                    },
                    {
                        "key":"1-2",
                        "ref":null,
                        "props":{
                            "title":"老师2",
                            "value":"1-2",
                            "children":[

                            ]
                        },
                        "_owner":null,
                        "_store":{

                        }
                    },
                    {
                        "key":"1-3",
                        "ref":null,
                        "props":{
                            "title":"老师3",
                            "value":"1-3",
                            "children":[

                            ]
                        },
                        "_owner":null,
                        "_store":{

                        }
                    },
                    {
                        "key":"1-4",
                        "ref":null,
                        "props":{
                            "title":"老师4",
                            "value":"1-4",
                            "children":[

                            ]
                        },
                        "_owner":null,
                        "_store":{

                        }
                    },
                    {
                        "key":"1-5",
                        "ref":null,
                        "props":{
                            "title":"老师5",
                            "value":"1-5",
                            "children":[

                            ]
                        },
                        "_owner":null,
                        "_store":{

                        }
                    },
                    {
                        "key":"1-6",
                        "ref":null,
                        "props":{
                            "title":"老师6",
                            "value":"1-6",
                            "children":[

                            ]
                        },
                        "_owner":null,
                        "_store":{

                        }
                    },
                    {
                        "key":"1-7",
                        "ref":null,
                        "props":{
                            "title":"老师7",
                            "value":"1-7",
                            "children":[

                            ]
                        },
                        "_owner":null,
                        "_store":{

                        }
                    },
                    {
                        "key":"1-8",
                        "ref":null,
                        "props":{
                            "title":"老师8",
                            "value":"1-8",
                            "children":[

                            ]
                        },
                        "_owner":null,
                        "_store":{

                        }
                    },
                    {
                        "key":"1-9",
                        "ref":null,
                        "props":{
                            "title":"老师9",
                            "value":"1-9",
                            "children":[

                            ]
                        },
                        "_owner":null,
                        "_store":{

                        }
                    }
                ]
            },
            "_owner":null,
            "_store":{

            }
        },
        "pos":"0-1",
        "children":[
            {
                "pos":"0-1-0"
            },
            {
                "pos":"0-1-1"
            },
            {
                "pos":"0-1-2"
            },
            {
                "pos":"0-1-3"
            },
            {
                "pos":"0-1-4"
            },
            {
                "pos":"0-1-5"
            },
            {
                "pos":"0-1-6"
            },
            {
                "pos":"0-1-7"
            },
            {
                "pos":"0-1-8"
            }
        ]
    }
]
复制代码

分析发现，allCheckedNodes对象里的pos字段内容是当前被选中的节点的key值，而children字段是这个节点的被选中的全部子节点的集合数组，而children内的对象又有可能有下一层级的子节点。

为了计算这种嵌套的多层级关系的子节点数量，咱们须要用到递归方法。

方法思路是，一层一层的去看当前对象有没有children字段，若是没有，说明它是子节点，那直接让数量加一；若是有，则说明是父节点，则递归调用方法去取其子节点内的数据。通过这样的递归取数，就能计算出全部被选中的子节点的数量了。

方法代码以下：

export const getCheckedNodes = (extra) => {
    console.log('targetExtra', extra)
    let checkedNodes = extra.allCheckedNodes
    let count = getCheckedCount(checkedNodes)
    if (isObjEmpty(checkedNodes)) {
        checkedNodes = []
    }
    return {checkedNodes, count}
}

export const getCheckedCount = (checkedNodes) => {
    if (!isObjEmpty(checkedNodes)) {
        let quantity = 0
        for (let i = 0; i < checkedNodes.length; i++) {
            let checkedNode = checkedNodes[i]
            if (checkedNode.node) {
                if (checkedNode.children) {
                    checkedNode = checkedNode.children
                    quantity = quantity + getCheckedCount(checkedNode)
                } else {
                    quantity = quantity + 1
                    continue
                }
            } else {
                if (checkedNode.props) {
                    if (checkedNode.props.children.length > 0) {
                        checkedNode = checkedNode.props.children
                        quantity = quantity + getCheckedCount(checkedNode)
                    } else {
                        quantity = quantity + 1
                        continue
                    }
                }
            }
        }
        return quantity
    } else {
        return 0
    }
}
复制代码