React TreeSelect自定义过滤：忽略开头空格且不影响UI显示

核心思路是分离输入框的显示内容和过滤逻辑的处理值，不用修改filterValue的存储值，而是通过自定义过滤规则来忽略开头空格。

• 只维护一个状态存储用户的原始输入内容，保证输入框显示完整的用户输入（包括开头空格）
• 利用TreeSelect组件提供的自定义过滤属性（比如Antd的filterTreeNode），在过滤时自动去掉输入内容的开头空格再进行匹配

代码示例 #

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

const CustomTreeSelect = () => {
  // 存储用户输入的原始内容，包括开头空格
  const [rawSearchInput, setRawSearchInput] = useState('');

  // 自定义过滤逻辑：忽略输入开头的空格后再匹配节点
  const filterTreeNodes = (inputValue, treeNode) => {
    const processedInput = inputValue.trimStart().toLowerCase();
    return treeNode.title.toLowerCase().includes(processedInput);
  };

  return (
    <TreeSelect
      // 其他原有属性
      filter
      filterValue={rawSearchInput}
      // 保存用户的原始输入，不做修剪
      onFilterValueChange={(e) => setRawSearchInput(e?.value)}
      // 启用自定义过滤逻辑
      filterTreeNode={filterTreeNodes}
    />
  );
};

逻辑说明 #

1. rawSearchInput始终存储用户输入的原始内容，所以输入框会完整显示用户输入的所有字符（包括开头空格）
2. filterTreeNodes函数中，先对输入值执行trimStart()去掉开头空格，再和节点标题进行匹配，实现忽略开头空格的过滤效果
3. 这种方式不会修改用户的输入显示，同时满足过滤需求，兼顾了用户体验和功能逻辑

如果使用的是其他UI库的TreeSelect组件，核心思路一致：找到组件提供的自定义过滤入口，在过滤逻辑中对输入值做trimStart()处理即可。

内容的提问来源于stack exchange，提问作者Michał Turczyn