react搜索table表单功能

要在React中实现搜索table表单功能，你可以使用以下步骤：

1. 创建一个包含table的组件，例如TableComponent。
2. 在组件的state中添加一个searchTerm属性来存储搜索关键字。
3. 创建一个搜索框的组件，例如SearchComponent，并在该组件中添加一个onChange事件处理程序来更新TableComponent的searchTerm状态。
4. 在TableComponent中使用Array.prototype.filter()方法来筛选出与searchTerm匹配的行。
5. 使用.map()方法将筛选后的行渲染到table中。

下面是一个简单的示例代码：

import React, { useState } from 'react';

const TableComponent = ({data}) => {
  const [searchTerm, setSearchTerm] = useState('');

  const handleSearch = event => {
    setSearchTerm(event.target.value);
  }

  const filteredData = data.filter(item =>
    item.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <>
      <input type="text" placeholder="Search" onChange={handleSearch} />
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          {filteredData.map(item => (
            <tr key={item.id}>
              <td>{item.name}</td>
              <td>{item.age}</td>
              <td>{item.email}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
}

export default TableComponent;

在这个示例中，我们使用useState()钩子来创建一个searchTerm状态。我们还创建了一个handleSearch()函数来更新searchTerm状态。我们使用Array.prototype.filter()方法来筛选出与searchTerm匹配的行，并使用.map()方法将它们渲染到table中。

请注意，此示例中的data属性是一个包含name、age和email属性的数组。如果您的数据结构不同，请相应地更改筛选和渲染逻辑。