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":[

                            ]
                        },