react table头部搜索框封装

react-table是一个用于显示数据表格的强大库，它提供了丰富的功能和灵活性。为了增强用户体验，我们可以封装一个头部搜索框组件，用于快速过滤和搜索表格数据。

首先，创建一个名为TableHeaderSearch的组件。该组件会接收一个名为onSearch的回调函数作为props，用于将用户输入的搜索关键字传递给父组件。

组件的结构可以如下所示：

import React from 'react';

const TableHeaderSearch = ({ onSearch }) => {
  const handleSearch = (e) => {
    const keyword = e.target.value;
    onSearch(keyword);
  }

  return (
    <div>
      <input type="text" onChange={handleSearch} placeholder="搜索" />
    </div>
  );
}

export default TableHeaderSearch;

在父组件中，引入该TableHeaderSearch组件并将其放置在表格的头部。在父组件中定义一个名为searchKeyword的state，用于保存用户输入的搜索关键字。

import React, { useState } from 'react';
import TableHeaderSearch from './TableHeaderSearch';

const MyTable = () => {
  const [searchKeyword, setSearchKeyword] = useState('');

  const handleSearch = (keyword) => {
    setSearchKeyword(keyword);
  }

  // 在渲染表格数据时，根据searchKeyword来过滤数据

  return (
    <div>
      <TableHeaderSearch onSearch={handleSearch} />
      {/* 渲染表格 */}
    </div>
  );
}

export default MyTable;

在handleSearch回调函数中，我们将用户输入的关键字设置为searchKeyword的新值，从而触发组件重新渲染。在渲染表格数据时，可以使用该searchKeyword来过滤显示数据。

这样，我们就成功封装了一个react-table的头部搜索框组件，用户可以通过输入关键字来快速过滤和搜索表格数据。