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 
              //搜索框
                    //数据
        
) } }

你可能感兴趣的:(React 框架 + ant design DirectoryTree 添加搜索框)