antd中5.20.2Select 的filterOption如何使用

在Ant Design (antd) v5.20.2版本的`<Select>`组件中，`filterOption`属性用于实现搜索式的下拉选项过滤功能。它允许用户输入关键字，然后只显示包含该关键字的选项列表。

以下是`filterOption`的基本用法：

import { Select } from 'antd';
// ...其他 imports

const { Option, SearchInput } = Select;

function CustomFilterOption({ option, filterOption }) {
  // 这里的filterOption是一个函数，接受当前的值和输入的关键字，并返回布尔值
  return (
    <>{option.label}</>
  );
}

<Select
  options={['Apple', 'Banana', 'Cherry', ...]}
  filterOption={(input, option) => {
    // 当输入为空时，返回true表示显示所有选项
    if (!input) return true;
    // 使用includes检查option的label是否包含输入的关键字
    return option.props.children.toLowerCase().includes(input.toLowerCase());
  }}
  filterOptionComponent={CustomFilterOption}
/>

在这个例子中，`filterOption`函数接收两个参数：用户的输入`input`和选中的选项`option`。如果输入不为空并且选项的标签包含输入的关键字，那么这个选项会被显示出来。