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"属性连接到state,如下所示:

filtered={this.state.filtered}

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

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

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

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