如何在Reactjs中使用搜索栏过滤表格行

在Reactjs中使用搜索栏过滤表格行的方法如下：

创建一个React组件，命名为TableFilter，用于包含搜索栏和表格。
在TableFilter组件的state中定义一个名为searchText的变量，用于保存用户输入的搜索关键字。
在TableFilter组件的render方法中，将搜索栏和表格渲染出来。
在搜索栏中添加一个input元素，并为其绑定一个onChange事件处理函数，用于更新searchText的值。
在表格中的每一行数据中添加一个判断条件，判断该行数据是否包含searchText，如果包含则显示该行，否则隐藏该行。
完成以上步骤后，用户在搜索栏中输入关键字时，表格会根据关键字自动过滤显示相应的行数据。

下面是一个示例代码：

import React, { Component } from 'react';

class TableFilter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchText: ''
    };
  }

  handleSearchTextChange = (event) => {
    this.setState({ searchText: event.target.value });
  }

  render() {
    const { searchText } = this.state;
    const { data } = this.props;

    const filteredData = data.filter(item => {
      return item.name.toLowerCase().includes(searchText.toLowerCase());
    });

    return (
      <div>
        <input type="text" value={searchText} onChange={this.handleSearchTextChange} placeholder="Search..." />
        <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>
      </div>
    );
  }
}

export default TableFilter;

在上述示例代码中，TableFilter组件接收一个名为data的props，该props包含要显示的表格数据。用户在搜索栏中输入关键字时，会触发handleSearchTextChange方法更新searchText的值，然后根据searchText过滤data数组中的数据，只显示包含关键字的行数据。

这是一个简单的Reactjs中使用搜索栏过滤表格行的实现方法。根据具体的业务需求，你可以根据这个示例代码进行修改和扩展。