antd@4树结构搜索

在 Ant Design 4 中，可以使用 TreeSelect 组件来实现树结构搜索。TreeSelect 组件提供了一个 filterTreeNode 属性，可以通过该属性自定义树节点的搜索逻辑。

例如，假设有一个树结构的数据如下：

const treeData = [
  {
    title: 'Node 1',
    value: 'node1',
    children: [
      {
        title: 'Node 1-1',
        value: 'node1-1',
      },
      {
        title: 'Node 1-2',
        value: 'node1-2',
      },
    ],
  },
  {
    title: 'Node 2',
    value: 'node2',
    children: [
      {
        title: 'Node 2-1',
        value: 'node2-1',
      },
      {
        title: 'Node 2-2',
        value: 'node2-2',
      },
    ],
  },
];

可以通过以下代码来实现树结构搜索：

import { TreeSelect } from 'antd';
import { useState } from 'react';

const { TreeNode } = TreeSelect;

function TreeSelectDemo() {
  const [searchValue, setSearchValue] = useState('');

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

  const filterTreeNode = (node) => {
    const matched = node.title.indexOf(searchValue) !== -1;
    if (matched) {
      return true;
    }
    if (node.children) {
      return node.children.some(child => filterTreeNode(child));
    }
    return false;
  };

  return (
    <TreeSelect
      showSearch
      filterTreeNode={filterTreeNode}
      onSearch={handleSearch}
    >
      {treeData.map(treeNode => (
        <TreeNode key={treeNode.value} title={treeNode.title} value={treeNode.value}>
          {treeNode.children && treeNode.children.map(childNode => (
            <TreeNode key={childNode.value} title={childNode.title} value={childNode.value} />
          ))}
        </TreeNode>
      ))}
    </TreeSelect>
  );
}

在上面的代码中，首先定义了一个 searchValue 状态来保存搜索关键字。然后在 handleSearch 函数中更新 searchValue 状态。接着定义了一个 filterTreeNode 函数来自定义节点的搜索逻辑。该函数会递归遍历树节点，判断节点的 title 是否包含 searchValue，如果包含则返回 true；否则继续递归遍历节点的子节点，直到找到一个包含 searchValue 的节点或者遍历完整个树结构。最后在 TreeSelect 组件中将 filterTreeNode 属性设置为 filterTreeNode 函数，并在 onSearch 事件中调用 handleSearch 函数来更新搜索关键字。