如何实现带有过滤器的React表（附代码）

在本教程中，我想向你展示如何使用带有过滤器功能的React表库。在前面的例子中，你安装了React表库来创建一个表组件。现在，我们将使用户能够过滤表中的数据。

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

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

const App = () => {
  const [filters, setFilters] = React.useState(['SETUP', 'LEARN']);

  const handleFilter = (filter) => {
    filters.includes(filter)
      ? setFilters(filters.filter((value) => value !== filter))
      : setFilters(filters.concat(filter));
  };

  ...
};

接下来，在Table组件上添加一个HTML复选框组，如果你愿意，也可以完全在其他地方添加，以设置过滤器的状态。

const App = () => {
  ...

  return (
    <>
      <div>
        <label htmlFor="setup">
          Include SETUP:
          <input
            id="setup"
            type="checkbox"
            checked={filters.includes('SETUP')}
            onChange={() => handleFilter('SETUP')}
          />
        </label>
      </div>

      <div>
        <label htmlFor="learn">
          Include LEARN:
          <input
            id="learn"
            type="checkbox"
            checked={filters.includes('LEARN')}
            onChange={() => handleFilter('LEARN')}
          />
        </label>
      </div>

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

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

const App = () => {
  const [filters, setFilters] = React.useState(['SETUP', 'LEARN']);

  const handleFilter = (filter) => {
    filters.includes(filter)
      ? setFilters(filters.filter((value) => value !== filter))
      : setFilters(filters.concat(filter));
  };

  const data = {
    nodes: list.filter(
      (item) =>
        (filters.includes('SETUP') && item.type === 'SETUP') ||
        (filters.includes('LEARN') && item.type === 'LEARN')
    ),
  };

  return (
    <>
      ...

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

我们在本教程中使用了一个复选框，然而，你可以使用一个过滤器下拉框或任何其他React组件，以同样的方式触发该功能。

你已经看到，React表库并没有为过滤器功能提供一个本地插件。然而，由于你可以简单地将一个过滤过的列表从外面传到表组件外面的过滤后，你有所有你需要的选项在手。