如何重置React Table中的过滤器字段?

时间:2017-12-05 15:43:38

标签: reactjs react-table

是否有指令在某个时刻重置滤波器字段?要过滤任何列,可以在onFetchData中调用Ajax,以便过滤数据。但是在信息过滤后我需要的一些动作,重新渲染表格。在我的类中的另一个函数中,我执行:

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
/>

1 个答案:

答案 0 :(得分:6)

检查出来:

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

简单,还是什么?