React搜索栏如何实现点击按钮后执行产品筛选功能？

目前你的代码在输入框内容变化时会实时更新searchTerm，进而触发筛选逻辑。要改成点击Search按钮才执行筛选，只需调整状态管理逻辑，把「输入框内容」和「实际用于筛选的关键词」分开即可，具体修改步骤如下：

步骤1：新增用于存储筛选关键词的状态 #

在现有状态定义后，添加一个新的状态变量，专门保存点击按钮后确定的筛选关键词：

const [searchTerm, setSearchTerm] = useState("");
const [product, setProduct] = useState([]); 
// 新增状态：存储最终用于筛选的关键词
const [filteredSearchTerm, setFilteredSearchTerm] = useState("");

步骤2：修改筛选逻辑的判断条件 #

把原来筛选时用到的searchTerm替换成新的filteredSearchTerm，这样只有当点击按钮更新这个状态时，才会触发筛选：

const displayProduct = product
  .filter((product) => {
    if (filteredSearchTerm === "")
      return product;
    else if (product.productName.replaceAll(/\s/g,'').toLowerCase().includes(filteredSearchTerm.toLowerCase().replaceAll(/\s/g,'')))
      return product;
  })
  // 后续slice、map逻辑保持不变
  .slice(pagesVisited,pagesVisited + productPerPage)
  .map(product => {
    return(
      <div className='imageContainer ' key={product.id}>
          <img src={PopularOne} className="image"/>
          <div className='productName'>
          <Link style={{ textDecoration:'none' }} to="/productsDetails" state={{ product:product }}>{product.productName}</Link>
          </div>
          <div className='productPrice'>
          <h3 >RM{product.productPrice}</h3>
          </div>
      </div>   
    )
  })

步骤3：给Search按钮添加点击事件 #

点击按钮时，把当前输入框的searchTerm赋值给filteredSearchTerm，触发筛选：

<div>
  <input className='filterInput' onChange={event => {
    setSearchTerm(event.target.value)
  }}></input>
  <button className='filterSearchButton' onClick={() => {
    setFilteredSearchTerm(searchTerm);
  }}>Search</button>
</div>

额外优化（可选） #

如果需要支持按回车键触发搜索，可以给输入框添加onKeyDown事件：

<input 
  className='filterInput' 
  onChange={event => setSearchTerm(event.target.value)}
  onKeyDown={(e) => {
    if (e.key === 'Enter') {
      setFilteredSearchTerm(searchTerm);
    }
  }}
></input>

这样修改后，输入框只会实时更新自身内容，只有点击Search按钮（或按回车）时才会执行筛选逻辑。

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