React 框架 + ant design DirectoryTree 添加搜索框

在React 框架里使用ant design，ant design tree 组件网址：https://ant-design.gitee.io/components/tree-cn/

  //导入antd;
import { Tree } from 'antd';
const { DirectoryTree } = Tree;

//创建组件
class Search extends React.Component{
  constructor(props) {
        super(props);
       this.state = {
           select_treenodes:[ ],
           expandFlag:[ ],
           tree_data:[ ],
     }
}
onSelect = (selectedKeys, info) => {
   //点击树节点触发事件可以打印selectedKeys，info查看它的值
     }

// 展开/收起节点时触发（把指定张开的父节点重新赋值；如果加了 expandedKeys，就必须用这一步，不然不能展开节点以及收起节点）
    onExpand=(expandedKeys, {expanded: bool, node})=>{
        console.log(expandedKeys);
        this.setState({
            expandFlag:expandedKeys,
        }
    }

//当搜索框输入时触发
SearchChange = （e）=>{
        console.log(e.target.value) //输入的值打印
        let data = this.state.tree_data; //节点数据；
        //遍历节点数据
        for(let i =0; i <data[0].children.length; i++){
            if(data[0].children[i].title == e.target.value){  //如果输入的值等于节点的title，把节点张开，标记节点；
                console.log(data[0].children[i].key) //打印key，如果key是number类型则要转化成String类型；
                this.setState({
                    select_treenodes:[data[0].children[i].key], //设置选中的树节点
                    expandFlag:[String(data[0].key)],    //展开指定父节点
                })
            }
        }
        console.log(this.state.tree_data)
}
//渲染
render(){
          //tree数据
      const treeData = [
                   {
                   title: 'parent 0',
                   key: '0-0',
                 children: [
                    { title: 'leaf 0-0', key: '0-0-0', isLeaf: true },
                    { title: 'leaf 0-1', key: '0-0-1', isLeaf: true },
                    ],
                },
                {
                 title: 'parent 1',
                 key: '0-1',
                children: [
               { title: 'leaf 1-0', key: '0-1-0', isLeaf: true },
               { title: 'leaf 1-1', key: '0-1-1', isLeaf: true },
              ],
            },
    ];
    this.state.tree_data =  treeData  //节点值赋值给state 的tree_data;
   return(
         <div>
             <Search style={{ marginBottom: 8 }} placeholder="search" onChange={this.SearchChange} /> //搜索框
                 <DirectoryTree
                      multiple   //支持点选多个节点（节点本身）boolean类型；
                      onSelect={this.onSelect}  //点击树节点触发；
                      selectedKeys={this.state.select_treenodes}  //（受控）设置选中的树节点;
                       // 展开指定的树节点
                      expandedKeys={this.state.expandFlag}   //（受控）展开指定的树节点(注意，这个一定要与onExpand一起用，不然不能关闭和展开树节点；
                        onExpand={this.onExpand}  //    展开/收起节点时触发;
                         treeData={treeData} />   //数据
        </div>

   )
}
}