如何替换Elastic UI搜索栏query属性中的特殊符号？

EUI搜索栏onChange回调返回的query属性是组件内部做语法解析后的结果值，当输入内容包含*、?、[]等EUI搜索语法保留的特殊符号时，内部解析会直接失败，返回null，直接对该query调用.replace方法无法生效，因为此时拿到的已经是空值，不存在可处理的字符串内容。

解决方案如下：

• 第一步：改用受控模式绑定搜索栏，优先取原始输入值做预处理，不要依赖组件解析后的query返回值
• 第二步：提前对原始输入字符串做特殊字符过滤，过滤逻辑参考如下代码：

// 可根据业务需要调整要过滤的特殊字符范围
const sanitizeSearchInput = (rawInput) => {
  if (!rawInput) return '';
  // 替换所有EUI搜索语法保留的特殊符号
  return rawInput.replace(/[*?\[\]{}()^~:\\\/#=]/g, '');
}

• 第三步：完整的组件绑定示例：

import { useState } from 'react';
import { EuiSearchBar } from '@elastic/eui';

const YourTableComponent = () => {
  // 自行维护搜索值，不依赖EUI内部解析结果
  const [searchValue, setSearchValue] = useState('');

  const handleSearchChange = (_, rawInput) => {
    // 直接处理原始输入字符串，过滤特殊字符
    const sanitizedValue = sanitizeSearchInput(rawInput);
    setSearchValue(sanitizedValue);
    // 后续的搜索、过滤逻辑直接使用sanitizedValue即可
  };

  return (
    <EuiSearchBar
      query={searchValue}
      onChange={handleSearchChange}
      {/* 其他搜索栏配置项 */}
    />
    {/* 表格其他组件逻辑 */}
  )
}

内容的提问来源于stack exchange，提问作者aallen92