如何在React.js中通过搜索框筛选表格行数据

核心思路 #

你已经完成了搜索过滤的核心逻辑，只需要把过滤后的数据存入React状态，利用状态变更触发组件重渲染，就能自动更新表格展示内容。

具体实现步骤 #

• 第一步：引入useState Hook定义状态，用来存储过滤后的匹配结果

import { useState } from 'react';

function YourComponent() {
  // 存储过滤后的产品列表，作为表格的渲染数据源
  const [filteredProducts, setFilteredProducts] = useState([]);
  // 可选：受控输入框绑定搜索关键词
  const [searchTerm, setSearchTerm] = useState('');

  // 你的原有逻辑和其他代码...
}

• 第二步：修改原有搜索函数，把匹配结果更新到状态

function handleSearch (searchTerm) {
  const lowerCaseTerm = searchTerm.toLowerCase();
  const matchedProducts = getValues("products").filter(
    product => product.description.toLowerCase().includes(lowerCaseTerm)
  );
  // 更新状态触发组件重渲染
  setFilteredProducts(matchedProducts);
}

• 第三步：绑定输入框和搜索逻辑，实现输入时实时触发搜索

<input 
  type="text"
  placeholder="输入关键词搜索产品"
  value={searchTerm}
  onChange={(e) => {
    const inputValue = e.target.value;
    setSearchTerm(inputValue);
    handleSearch(inputValue);
  }}
/>

• 第四步：把表格的数据源替换为filteredProducts状态

<table>
  <thead>
    <tr>
      <th>产品描述</th>
      <!-- 其他表头字段 -->
    </tr>
  </thead>
  <tbody>
    {filteredProducts.map(product => (
      <tr key={product.id}>
        <td>{product.description}</td>
        <!-- 其他表格列字段 -->
      </tr>
    ))}
  </tbody>
</table>

优化建议 #

• 组件初始化时可以把filteredProducts的默认值设为全量产品列表，这样页面首次加载时表格默认展示所有数据
• 如果getValues("products")是异步接口返回的数据，建议先把全量产品存入单独的状态，避免每次搜索都重复调用取值逻辑，提升性能

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