僅當單擊搜索btn時如何顯示過濾后的資料（當用戶在輸入欄位中鍵入內容時）

我正在做一個 React 專案。我正在嘗試實作搜索功能。到目前為止，一切都按我的預期作業，但我正在尋找的是僅當用戶單擊輸入欄位旁邊的“搜索”btn 時才顯示過濾后的資料，而不是在用戶開始后顯示資料在輸入上鍵入內容。這是 2 個相關組件的代碼，UsersHeader 是 Users 的子項：

function Users() {
  const [filteredResults, setFilteredResults] = React.useState([]);
  const [searchInput, setSearchInput] = React.useState("");
  const searchItems = (searchValue) => {
    setSearchInput(searchValue);
    if (searchInput !== "") {
      const filteredData = UsersCollection.filter((user) => {
        return (
          Object.values(user.userName)
            .join("")
            .toLowerCase()
            .includes(searchInput.toString().toLowerCase()) ||
          Object.values(user.email)
            .join("")
            .toLowerCase()
            .includes(searchInput.toString().toLowerCase()) ||
          Object.values(user.country)
            .join("")
            .toLowerCase()
            .includes(searchInput.toString().toLowerCase()) ||
          Object.values(user.company)
            .join("")
            .toLowerCase()
            .includes(searchInput.toString().toLowerCase()) ||
          Object.values(user.registrationDate)
            .join("")
            .toLowerCase()
            .includes(searchInput.toString().toLowerCase())
        );
      });
      setFilteredResults(filteredData);
    } else {
      setFilteredResults(UsersCollection);
    }
  };
  return (
    <div style={{ padding: "100px 100px 100px 300px" }}>
      <div>
        <UsersHeader {...{ searchItems, searchInput }}></UsersHeader>
      </div>

      <div>
        {searchInput?.length >= 1 ? ( //if something is being typed in the search input field
          <UserList filteredResults={filteredResults} />
        ) : (
          <UserList
            searchInput={searchInput}
            UsersCollection={UsersCollection}
          ></UserList>
        )}
      </div>
    </div>
  );
}

export default Users;

export function UsersHeader({ searchItems }) {
  const [searchValue, setSearchValue] = useState();
  const handleChange = (e) => {
    // setSearchValue(e.target.value);
    searchItems(e.target.value);
  };
  const handlePressEnter = () => {
    handleClick();
  };
  const handleClick = () => {};

  return (
    <div className="user-header">
      <div>
        <Button
          className="user-header-filter-btn"
          style={{ width: "fit-content", height: "fit-content" }}
        >
          <img src={filterIcon} alt="" />
        </Button>
      </div>
      <div>
        <Input
          value={searchValue}
          onChange={(e) => {
            searchItems(e.target.value);
          }}
          className="user-header-input"
          style={{ width: "800px" }}
          placeholder=" &nbsp;Search by keyword"
          allowClear
          onPressEnter={(e) => {
            handlePressEnter(e);
          }}
        />
      </div>
      <div>
        <Button onClick={handleClick} className="user-header-search-btn">
          <Search />
          <span>Search</span>
        </Button>
      </div>
    </div>
  );
}

uj5u.com熱心網友回復：

您的問題是您在輸入時回傳過濾器。您應該做的是將負責將過濾后的訊息回傳到一個單獨的函式中的代碼，該函式在單擊搜索按鈕時觸發。

const handleChange = (e) => {
    setSearchInput(e.target.value);
//searchItems(e.target.value);
};

const searchItems = () => {
//setSearchInput(searchValue);
if (searchInput !== "") {
  const filteredData = UsersCollection.filter((user) => {
    return (
      Object.values(user.userName)
        .join("")
        .toLowerCase()
        .includes(searchInput.toString().toLowerCase()) ||
      Object.values(user.email)
        .join("")
        .toLowerCase()
        .includes(searchInput.toString().toLowerCase()) ||
      Object.values(user.country)
        .join("")
        .toLowerCase()
        .includes(searchInput.toString().toLowerCase()) ||
      Object.values(user.company)
        .join("")
        .toLowerCase()
        .includes(searchInput.toString().toLowerCase()) ||
      Object.values(user.registrationDate)
        .join("")
        .toLowerCase()
        .includes(searchInput.toString().toLowerCase())
    );
  });
  setFilteredResults(filteredData);
} else {
  setFilteredResults(UsersCollection);
}}

const handleClick = () => {searchItems()};

標籤：反应按钮搜索输入场地

上一篇：如何修復此錯誤：您正在嘗試使用沒有GetMaterialApp或Get.key的無背景關系導航

下一篇：嘗試使用按鈕和javascript在4個樣式表之間切換