React Table：以编程方式重置过滤器

Question

我正在使用 React-Table 6.7.6，并且想以编程方式重置所有过滤器。

现在，我有这个代码：

return (
    <div>
        <ReactTable
            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>
);

有没有办法在不深入研究这个东西的内部的情况下重置过滤器值？

Answer 1

知道了。

1) 当你启动你的父组件时，让它有状态并且给它一个'filtered' 属性一个空数组，像这样：

constructor() {
    super();
    this.state = {
        filtered: []
    };
}

2) 当你设置你的 React Table 组件时，将其 "filtered" 属性连接到状态，如下所示：

filtered={this.state.filtered}

3) 将过滤连接到状态，如下所示：

onFilteredChange={filtered => {this.setState({ filtered });}}

4) 连接一个按钮或任何你想重置过滤器的东西，使用像这样的 onClick 方法：

onClick={()=>this.setState({ filtered: [] })}>

Answer 2

在 react-table v6.11.4.

中表现出色

我做的唯一改变是像这样使用 React Hooks：

const [filtered, setFiltered] = useState([]);

const handleFilteredChanged = (filterList) => {
  setFiltered(filterList);
};

const handleResetFilters = () => {
  setFiltered([]);
};

<ReactTable
    filtered={filtered}
    filterable
    onFilteredChange={handleFilteredChanged}
    ...

感谢 Boris 发布答案。

React Table：以编程方式重置过滤器

React Table: resetting filters programmatically

reactjs

react-table