reactjs react-select搜索过滤器输入始终为空

我正在尝试使用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

如果使用AsyncSelect，则不能使用filterOption，filterOption仅用于静态数据的选择。
在AsyncSelect中，你必须使用loadOption，这个函数将检索数据并过滤它（在这个例子中，调用只是一个超时）
此外，defaultOption只是立即显示一个静态列表，而不加载任何数据，在这个例子中，默认选项是这是一个立即显示的3个用户的静态列表，但如果你开始键入你会发出“呼叫”，例如，如果你搜索“电子邮件”，你会加载所有五个用户，所以可能你可以删除默认选项。
https://codesandbox.io/s/serene-swirles-d2rx9k

import { useState, useEffect } from "react";
import "./styles.css";
import AsyncSelect from "react-select/async";

const DEFAULT_OPTIONS = [
  {
    id: 1,
    email: "john@email.com",
    serial_number: 101,
    str_firstname: "John",
    str_lastname: "Doe"
  },
  {
    id: 2,
    email: "jim@email.com",
    serial_number: 102,
    str_firstname: "James T.",
    str_lastname: "Kirk"
  },
  {
    id: 3,
    email: "sara@email.com",
    serial_number: 103,
    str_firstname: "Sara",
    str_lastname: "Connor"
  }
];

const USERS_COMPLETE_LIST = [
  {
    id: 1,
    email: "john@email.com",
    serial_number: 101,
    str_firstname: "John",
    str_lastname: "Doe"
  },
  {
    id: 2,
    email: "jim@email.com",
    serial_number: 102,
    str_firstname: "James T.",
    str_lastname: "Kirk"
  },
  {
    id: 3,
    email: "sara@email.com",
    serial_number: 103,
    str_firstname: "Sara",
    str_lastname: "Connor"
  },
  {
    id: 4,
    email: "andrew@email.com",
    serial_number: 103,
    str_firstname: "Andrew",
    str_lastname: "Macrtiner"
  },
  {
    id: 5,
    email: "bob@email.com",
    serial_number: 103,
    str_firstname: "Robert",
    str_lastname: "Grok"
  }
];

export default function App() {
  const [selectedUser, setSelectedUser] = useState();

  useEffect(() => {
    console.log("selectedUser ==", selectedUser);
  }, [selectedUser]);

  const customUsersFilter = (searchText) => {
    return USERS_COMPLETE_LIST.filter(user => user.email.toLocaleLowerCase().includes(searchText.toLowerCase()))
  };

  const promiseOptions = (inputValue) =>
    new Promise((resolve) => {
      setTimeout(() => {
        resolve(customUsersFilter(inputValue));
      }, 1000);
    });

  return (
    <div className="App">
      <h1>
        Example for stackoverflow{" "}
        <a
          target="_blank"
          rel="noreferrer"
          href="https://stackoverflow.com/questions/76515982/react-select-search-filter-input-always-empty"
        >
          question
        </a>
      </h1>
      <AsyncSelect
        key="users_select"
        defaultOptions={DEFAULT_OPTIONS}
        value={selectedUser}
        loadOptions={promiseOptions}
        onChange={setSelectedUser}
        getOptionLabel={(option) => option.email}
        getOptionValue={(option) => option.id}
        isSearchable={true}
        isClearable={true}
      />
    </div>
  );
}

reactjs react-select搜索过滤器输入始终为空

1条答案

相关问题

热门标签

最新问答