reactjs - react 表 : resetting filters programmatically

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={this.state.filtered}

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

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

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

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