antd TreeSelect 搜索

如果你想要实现在antd的TreeSelect组件中进行搜索，可以通过以下步骤来实现：

1. 在TreeSelect组件中添加一个Search组件，用于输入搜索的关键字。
2. 在TreeSelect组件的onChange事件中，判断是否有搜索关键字，如果有，则对树形结构进行遍历，找出所有匹配的节点，并将这些节点的key存储到一个数组中。
3. 将存储匹配节点key的数组作为TreeSelect组件的value，这样就可以显示出所有匹配的节点。
4. 在TreeSelect组件的onSearch事件中，将搜索关键字存储到state中，以便在onChange事件中使用。

以下是一个简单的代码示例：

import React, { useState } from 'react';
import { TreeSelect, Input } from 'antd';

const treeData = [
  {
    title: 'Node A',
    value: 'a',
    children: [
      {
        title: 'Child A1',
        value: 'a1',
      },
      {
        title: 'Child A2',
        value: 'a2',
      },
    ],
  },
  {
    title: 'Node B',
    value: 'b',
    children: [
      {
        title: 'Child B1',
        value: 'b1',
      },
      {
        title: 'Child B2',
        value: 'b2',
      },
    ],
  },
];

const TreeSelectWithSearch = () => {
  const [searchKeyword, setSearchKeyword] = useState('');
  const [matchedKeys, setMatchedKeys] = useState([]);

  const traverseTree = (node, callback) => {
    callback(node);

    if (node.children) {
      node.children.forEach(child => {
        traverseTree(child, callback);
      });
    }
  };

  const handleSearch = value => {
    setSearchKeyword(value);
  };

  const handleChange = value => {
    setMatchedKeys([]);
    if (searchKeyword !== '') {
      const matchedKeys = [];
      traverseTree({ children: treeData }, node => {
        if (node.title.toLowerCase().indexOf(searchKeyword.toLowerCase()) !== -1) {
          matchedKeys.push(node.value);
        }
      });
      setMatchedKeys(matchedKeys);
    }
  };

  return (
    <TreeSelect
      value={matchedKeys}
      onChange={handleChange}
      treeData={treeData}
      showSearch
      searchPlaceholder="Search"
      filterTreeNode={() => true}
      dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
    >
      <Input.Search onChange={e => handleSearch(e.target.value)} />
    </TreeSelect>
  );
};

export default TreeSelectWithSearch;

在这个例子中，我们使用了useState钩子来保存搜索关键字和匹配节点的key。在handleSearch函数中，我们将搜索关键字存储到state中。在handleChange函数中，我们遍历整个树形结构，找出所有匹配的节点，并将这些节点的key存储到matchedKeys数组中。最后，在TreeSelect组件中，我们将matchedKeys数组作为value属性，这样就可以显示出所有匹配的节点。注意，在filterTreeNode属性中，我们返回了true，这样就可以显示所有节点，而不仅仅是匹配的节点。