培训资料库：树选搜索

web/client/src/sections/humanAffairs/containers/resourceRepository.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState ,useRef} from 'react';
 import { connect } from 'react-redux';
 import { Button, Col, Row, Input, Tree, Table, Space } from '@douyinfe/semi-ui';
 import { IconSearch, IconEditStroked, IconMinusCircleStroked, IconPlusCircleStroked } from '@douyinfe/semi-icons';
@@ -6,6 +6,8 @@ import '../style.less'
 
 const ResourceRepository = (props) => {
     const { dispatch, actions, clientHeight } = props;
+    const ref = useRef();
+
     const treeData = [
         {
             label: (<div>
@@ -46,17 +48,17 @@ const ResourceRepository = (props) => {
                 {
                     label: '中国',
                     value: 'China',
-                    key: '0-0',
+                    key: '1-0',
                     children: [
                         {
                             label: '北京',
-                            value: 'Beijing',
-                            key: '0-0-0',
+                            value: 'Beijing2',
+                            key: '1-0-0',
                         },
                         {
                             label: '上海',
                             value: 'Shanghai',
-                            key: '0-0-1',
+                            key: '1-0-1',
                         },
                     ],
                 },
@@ -207,10 +209,14 @@ const ResourceRepository = (props) => {
                         <Col className='left' span={6}>
                             <Button theme='solid' type='primary' >新建文件夹</Button>
                             <br />
-                            <Input suffix={<IconSearch />} showClear placeholder="请输入"></Input>
+                            <Input suffix={<IconSearch />} showClear onChange={v => ref.current.search(v)} placeholder="请输入"></Input>
                             <Tree
+                                ref={ref}
                                 treeData={treeData}
                                 defaultExpandAll
+                                filterTreeNode
+                                searchRender={false}
+                                blockNode={false}
                                 directory
                                 style={style}
                             />