React Table 6.7.6：如何程序化重置所有筛选器

嘿，刚好对React-Table v6这套比较熟，给你个完全不用深挖内部实现的解决方案——直接用组件的ref调用它原生提供的重置方法就行！

核心思路 #

React-Table v6内置了clearFilters()方法，专门用来清空所有活跃的筛选器，我们只需要通过ref获取到ReactTable组件的实例，就能调用这个方法。

具体实现步骤 #

1. 为ReactTable添加Ref

不管你用函数组件还是类组件，先给ReactTable绑定一个ref，这样才能拿到组件实例：

• 函数组件用useRef：

import { useRef } from 'react';
import ReactTable from 'react-table';

function MyTableComponent({ data, columns }) {
  // 创建ref
  const tableRef = useRef(null);

  // 重置筛选器的函数
  const resetAllFilters = () => {
    if (tableRef.current) {
      // 调用内置的清空方法
      tableRef.current.clearFilters();
    }
  };

  return (
    <div>
      {/* 添加重置按钮 */}
      <button onClick={resetAllFilters}>重置所有筛选器</button>
      <ReactTable
        ref={tableRef} // 绑定ref
        className="-striped -highlight"
        data={data}
        columns={columns}
        filterable={true}
        defaultFilterMethod={(filter, row, column) => {
          const id = filter.pivotId || filter.id;
          return row[id] !== undefined ? String(row[id]).includes(filter.value) : true;
        }}
      />
    </div>
  );
}

• 类组件用createRef：

import React from 'react';
import ReactTable from 'react-table';

class MyTableComponent extends React.Component {
  constructor(props) {
    super(props);
    // 创建ref
    this.tableRef = React.createRef();
  }

  resetAllFilters = () => {
    // 调用内置方法
    this.tableRef.current.clearFilters();
  };

  render() {
    const { data, columns } = this.props;
    return (
      <div>
        <button onClick={this.resetAllFilters}>重置所有筛选器</button>
        <ReactTable
          ref={this.tableRef}
          className="-striped -highlight"
          data={data}
          columns={columns}
          filterable={true}
          defaultFilterMethod={(filter, row, column) => {
            const id = filter.pivotId || filter.id;
            return row[id] !== undefined ? String(row[id]).includes(filter.value) : true;
          }}
        />
      </div>
    );
  }
}

为什么这个方法靠谱 #

clearFilters()是React-Table v6官方公开的API，完全不需要你去操作组件内部的状态或者DOM元素，既安全又省心，完美符合你“无需深入内部实现”的需求。

内容的提问来源于stack exchange，提问作者Boris K