reactjs - 使用 OptGroups 在 Ant Design Select Component 中搜索时忽略变音符号

Question

我正在使用Ant Design 的Select 组件。我想在搜索中使用选项组。

要求：

1. 选项被分组到 OptGroups
2. 搜索适用于选项（不是 OptGroups）
3. 选项值是数字（来自数据库的 ID），而不是文本
4. 搜索对重音符号不敏感（即当我键入时，应提供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>

麻烦从第四个要求开始。看来我需要提供自己的过滤器。幸运的是，AntDesign 有一个属性，它叫做filterOption. 让我们尝试一下：

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

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

显然，filterOption接收OptGroup过滤，而不是Option. 但是，我需要在选项中搜索，而不是在 OptGroups 中搜索。实现这一点的最简单方法是什么？

标签： reactjsantd

Answer 1

解决方案是return false针对 OptGroups。（对我来说似乎违反直觉。）之后，Ant Design 将filterOption使用 s 再次调用该函数Option。

这是一个例子：

  <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;
};