reactjs - 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）当你启动你的父组件时，让它有状态并给它一个带有空数组的“过滤”属性，如下所示：

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}
    ...

感谢鲍里斯发布答案。