React项目实现点击搜索按钮才展示过滤数据的方案咨询

以下是修改后的组件代码，实现仅在点击“Search”按钮或按下回车键时才展示过滤结果：

修改后的UsersHeader组件 #

export function UsersHeader({ searchItems }) {
  const [searchValue, setSearchValue] = useState("");

  // 输入框内容变化时只更新本地状态
  const handleInputChange = (e) => {
    setSearchValue(e.target.value);
  };

  // 点击搜索按钮触发搜索逻辑
  const handleSearch = () => {
    searchItems(searchValue);
  };

  // 按下回车键时触发搜索
  const handlePressEnter = () => {
    handleSearch();
  };

  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={handleInputChange}
          className="user-header-input"
          style={{ width: "800px" }}
          placeholder=" &nbsp;Search by keyword"
          allowClear
          onPressEnter={handlePressEnter}
        />
      </div>
      <div>
        <Button onClick={handleSearch} className="user-header-search-btn">
          <Search />
          <span>Search</span>
        </Button>
      </div>
    </div>
  );
}

修改后的Users组件 #

function Users() {
  const [filteredResults, setFilteredResults] = React.useState([]);
  const [searchInput, setSearchInput] = React.useState("");

  const searchItems = (searchValue) => {
    setSearchInput(searchValue);
    // 使用传入的searchValue而非searchInput，避免setState异步导致的取值错误
    if (searchValue !== "") {
      const filteredData = UsersCollection.filter((user) => {
        const lowerCaseSearch = searchValue.toLowerCase();
        // 提取重复逻辑，简化代码
        const matchesField = (field) => 
          Object.values(field).join("").toLowerCase().includes(lowerCaseSearch);
        
        return (
          matchesField(user.userName) ||
          matchesField(user.email) ||
          matchesField(user.country) ||
          matchesField(user.company) ||
          matchesField(user.registrationDate)
        );
      });
      setFilteredResults(filteredData);
    } else {
      setFilteredResults(UsersCollection);
    }
  };

  return (
    <div style={{ padding: "100px 100px 100px 300px" }}>
      <div>
        <UsersHeader searchItems={searchItems} searchInput={searchInput} />
      </div>

      <div>
        {/* 仅在点击搜索后searchInput才会被赋值，保留原判断逻辑即可 */}
        {searchInput.length >= 1 ? (
          <UserList filteredResults={filteredResults} />
        ) : (
          <UserList UsersCollection={UsersCollection} />
        )}
      </div>
    </div>
  );
}

export default Users;

关键改动说明 #

1. UsersHeader组件

   • 输入框onChange事件仅更新本地状态searchValue，不再实时触发搜索
   • 新增handleSearch函数，点击按钮时将输入框的值传给父组件执行过滤
   • 绑定回车事件，支持回车触发搜索
   • 初始化searchValue为空字符串，避免初始值为undefined引发的问题

2. Users组件

   • 修复searchItems中的异步问题：过滤数据时直接使用传入的searchValue（setSearchInput是异步操作，立即访问searchInput会拿到旧值）
   • 提取重复的字段匹配逻辑为matchesField函数，简化代码结构
   • 保留原渲染判断逻辑，因为现在只有点击搜索后searchInput才会被设置，完全符合需求

内容的提问来源于stack exchange，提问作者Abdelmounim SIFELHAK