作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
是否有在某个时刻重置过滤器字段的说明?要过滤任何列,可以在 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)当您启动父组件时,使其有状态并为其提供一个带有空数组的“过滤”属性,如下所示:
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: [] })}>
简单,还是什么?
关于reactjs - 如何重置React Table中的过滤字段?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47657470/
我是一名优秀的程序员,十分优秀!