在反应中过滤 bootstrap table

Question

我是 reactjs 的新手，我正在尝试在 react-bootstrap table 中进行过滤，如果搜索文本为空，它应该显示 table 中的所有记录但是现在没有任何显示，即使搜索文本框是空的。

我一直在为 React-bootstrap table 中的所有列过滤器设计寻找一个文本搜索框，然后我找到了这个示例

所以我将这个想法应用到我的代码中

这是我的过滤方法=>

filterData(event) {
  this.setState({
    timesheetstemp: this.state.timesheets,
    searchvalue: event.target.value
  });

  let data = this.state.timesheetstemp;

  console.log(event.target.value);

  if (this.state.searchfield && this.state.searchvalue) {
    if (this.state.searchfield === 'Emp ID') {
      data = data.filter(row => {
        row.empid.includes(this.state.searchvalue)
      })
    } else if (this.state.searchfield === 'Shift') {
      data = data.filter(row => {
        row.empid.includes(this.state.searchvalue)
      })
    } else if (this.state.searchfield === 'Cost Center') {
      data = data.filter(row => {
        row.empid.includes(this.state.searchvalue)
      })
    } else {
      data = data.filter(row => {
        row.empid.includes(this.state.searchvalue) || row.shiftid.includes(this.state.searchvalue) || row.shiftid.includes(this.state.searchvalue)
      })
    }
  }

  this.setState({
    timesheetstemp: data
  })
}

这是我的 Table =>

 <BootstrapTable keyField={"id"} data={this.state.timesheetstemp} columns={columns}>


                  </BootstrapTable>

这是我的搜索文本框 =>

 <Form.Control type="text" className="form-control width-300px float-md-right form-control-sm ml-3" placeholder="Search" value={this.state.searchvalue} onChange={this.filterData}/>

但是为什么在明文框后没有显示table中的所有数据？

Answer 1

setState是异步的，所以如果你想访问设置后的新状态，你应该使用setState的回调函数：

 this.setState({
    timesheetstemp: this.state.timesheets,
    searchvalue: event.target.value
  }, () => {

  let data = this.state.timesheetstemp;

  console.log(event.target.value);

  if (this.state.searchfield && this.state.searchvalue) {
  //...
  })

在反应中过滤 bootstrap table

Filter in react bootstrap table

reactjs

react-bootstrap-table