React中使用Antd TreeSelect组件获取选中节点的所有子节点,递归获取

在React中使用antd组件中的treeSelect组件,想要在获取当前选中节点的所有子节点。在使用onChange方法的时候,使用递归方法获得。

const treeData = [
  {
    title: 'Node1',
    value: '0-0',
    key: '0-0',
    children: [
      {
        title: 'Child Node1',
        value: '0-0-1',
        key: '0-0-1',
      },
      {
        title: 'Child Node2',
        value: '0-0-2',
        key: '0-0-2',
      },
    ],
  },
  {
    title: 'Node2',
    value: '0-1',
    key: '0-1',
  },
];
class TreeChild extends React.Component{
getChild=(arr)=>{
        let newArr = []
        for(let item = 0;item < arr.length;item++){
            newArr.push(arr[item].props.value)
            if(arr[item].props.children.length>0){
                newArr.push(....getChild(arr[item].props.children))
            }
        }
        return newArr
    }
onChange=(value, label, extra)=>{
   if(extra.triggerNode){
            let arr = this.getChild(extra.triggerNode.props.children)
        }
}
 render() {
    return (
      <TreeSelect
        style={{ width: '100%' }}
        treeData={treeData}
        onChange={this.onChange}
      />
    );
  }
}

就是这样简单,一开始还琢磨不来递归的写法,会了就很简单了。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容