如何实现带搜索的React表

在本教程中，我想告诉你如何使用具有搜索功能的React表库。在前面的例子中，你安装了React表库来创建一个表组件。现在，我们将使用户能够搜索表中的数据。

React表库并不带有原生的搜索功能，然而，由于你可以从外部访问数据，你可以在将其传递到表之前对其进行操作。让我们看看这是如何工作的。

首先，创建一个新的React useState Hook--它持有搜索的状态--和一个新的事件处理程序--它作为以后用户互动的回调函数。

const App = () => {
  const [search, setSearch] = React.useState('');

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

  ...
};

接下来，在Table组件上添加一个HTML输入字段，如果你想的话，也可以完全在其他地方添加，以设置搜索状态：

const App = () => {
  ...

  return (
    <>
      <label htmlFor="search">
        Search by Task:
        <input id="search" type="text" onChange={handleSearch} />
      </label>

      <Table data={data}>
        ...
      </Table>
    </>
  );
};

搜索状态开始工作。最后，在项目列表（这里是：节点）到达Table组件之前进行搜索：

const App = () => {
  const [search, setSearch] = React.useState('');

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

  const data = {
    nodes: list.filter((item) =>
      item.name.includes(search)
    ),
  };

  return (
    <>
      <label htmlFor="search">
        Search by Task:
        <input id="search" type="text" onChange={handleSearch} />
      </label>

      <Table data={data}>
        ...
      </Table>
    </>
  );
};
      <Table data={data}>        ...      </Table>    </>  );};

这就是了。如果你想让搜索不区分大小写，那么你必须将过滤功能改为：

const data = {
  nodes: list.filter((item) =>
    item.name.toLowerCase().includes(search.toLowerCase())
  ),
};

你已经看到，React表库并没有提供搜索功能的本地插件。然而，由于你可以简单地将一个搜索过的列表从外部传递给表，在表组件之外进行搜索后，你有所有你需要的选项在手。

如果你想看看表的过滤器是如何工作的，请到我的React表与过滤器教程。