6

しばらくしてフィルター フィールドをリセットする指示はありますか? 任意の列をフィルター処理すると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
/>
4

1 に答える 1

9

見てみな：

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

簡単、または何？

于 2018-01-04T10:54:49.673 に答える