Reactjs 使用optgroup在Ant Design Select组件中搜索时忽略变音符号

我用的是Ant Design的。 我想在搜索中使用选项组

要求：

选项被分组为OptGroups

搜索适用于选项（而不是optgroup）

选项值是数字（来自数据库的ID），而不是文本

搜索对重音符号不敏感（即，当我键入

ca

时，应提供

čaj

选项）

前三项要求是开箱即用的：

  <Select 
    showSearch
    defaultValue="2"
    style={{ width: 200 }}
    optionFilterProp="children"
  >
    <OptGroup label="Manager">
      <Option value="1">Jack</Option>
      <Option value="2">Lucy</Option>
    </OptGroup>
    <OptGroup label="Engineer">
      <Option value="3">yiminghe</Option>
    </OptGroup>
  </Select>

页面呈现，让我们尝试搜索。哎呀。浏览器发出尖叫声：

---

显然，

filter选项

接收用于筛选的

OptGroup

，而不是

选项

。但是，我需要搜索选项，而不是optgroup。实现这一点最简单的方法是什么？

解决方案是

为optgroup返回false。（对我来说似乎与直觉相反）之后，Ant Design将使用
选项
s再次调用
过滤器选项
函数

下面是一个例子：

  <Select 
    showSearch
    defaultValue="2"
    style={{ width: 200 }}
    filterOption={(input, option) => {
      if (option.props.value) {
          return strForSearch(option.props.children).includes(
              strForSearch(input)
          );
      } else {
          return false;
      }
    }}>
    <OptGroup label="Manager">
      <Option value="1">Jack</Option>
      <Option value="2">Lucy</Option>
      <Option value="3">Čaj</Option>
    </OptGroup>
    <OptGroup label="Engineer">
      <Option value="3">yiminghe</Option>
    </OptGroup>
  </Select>

  <Select 
    showSearch
    defaultValue="2"
    style={{ width: 200 }}
    filterOption={(input, option) => {
      if (option.props.value) {
          return strForSearch(option.props.children).includes(
              strForSearch(input)
          );
      } else {
          return false;
      }
    }}>
    <OptGroup label="Manager">
      <Option value="1">Jack</Option>
      <Option value="2">Lucy</Option>
      <Option value="3">Čaj</Option>
    </OptGroup>
    <OptGroup label="Engineer">
      <Option value="3">yiminghe</Option>
    </OptGroup>
  </Select>

const strForSearch = str => {
  return str
    ? str
        .normalize("NFD")
        .replace(/[\u0300-\u036f]/g, "")
        .toLowerCase()
    : str;
};