我正在尝试使用search实现异步react-select
输入。我已经创建了自定义过滤器,但当函数被调用时,它显示输入字符串searchText
参数为空,搜索不起作用react-select
的代码
<AsyncSelect
key="users_select"
onMenuScrollToBottom={handleScrollToBottomUsers}
cacheOptions={userList}
defaultOptions={userList}
isLoading={loadingUsers}
value={selectedOwner}
onChange={setSelectedOwner}
getOptionLabel={(option) => option.email}
getOptionValue={(option) => option.id}
isSearchable={true}
filterOption={customUsersFilter}
isClearable={true}
/>
自定义过滤函数
const customUsersFilter = (option, searchText) => {
console.log('option ==', option);
console.log('searchText ==', searchText);
if (!searchText) return true;
if (option.data.email.toLowerCase() === searchText.toLowerCase()) {
console.log('returning true');
return true;
} else {
console.log('returning false');
return false;
}
};
代码沙箱demo
1条答案
按热度按时间8nuwlpux1#
如果使用
AsyncSelect
,则不能使用filterOption
,filterOption
仅用于静态数据的选择。在
AsyncSelect
中,你必须使用loadOption
,这个函数将检索数据并过滤它(在这个例子中,调用只是一个超时)此外,
defaultOption
只是立即显示一个静态列表,而不加载任何数据,在这个例子中,默认选项是这是一个立即显示的3个用户的静态列表,但如果你开始键入你会发出“呼叫”,例如,如果你搜索“电子邮件”,你会加载所有五个用户,所以可能你可以删除默认选项。https://codesandbox.io/s/serene-swirles-d2rx9k