6

是否有在某个时刻重置过滤器字段的说明？过滤任何列都可以很好地调用onFetchDataAjax 调用来过滤数据。但是在过滤信息后我需要一些操作，重新渲染表格。在我班级的另一个函数中，我执行：

this.setState({
   filter: []
});

但是表更新后要过滤的信息仍然在字段中。

<ReactTable
    data={this.state.data}
    loading={this.state.loading}
    pages={this.state.pages}
    filterable
    columns={[
        {
            Header: "First Name",
            id: "firstName",
            accessor: d => d.firstName,
            Filter: ({ filter, onChange }) => (
                <input className="form-control input-sm"  onChange={event => onChange(event.target.value)} value={filter ? filter.value : ''} />
            )
        },
        {
            Header: "Last Name",
            accessor: "lastName",
            Filter: ({ filter, onChange }) => (
                <input className="form-control input-sm"  onChange={event => onChange(event.target.value)} value={filter ? filter.value : ''} />
            )
        }
    ]}
    onFilteredChange={(column, value) => {
        //Code
    }}
    onFetchData={(state, instance) => {
        //Ajax call
    }}
    defaultPageSize={10}
    className="-striped -highlight"
    manual
/>
4

1 回答 1

9

一探究竟：

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: [] })}>

容易，还是什么？

于 2018-01-04T10:54:49.673 回答