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组件时，请连接＆＃34;过滤＆＃34;财产到州，像这样：

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：

void Init_utsname() {
    init() ;
    rb_global_variable(&machine);
    rb_global_variable(&nodename);
    rb_define_global_function("machine", getMachine, 0);
    rb_define_global_function("nodename", getNodename, 0);
}

感谢Boris发布答案。

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

2 个答案: