在反应引导表中过滤答案

【问题标题】：Filter in react bootstrap table在反应引导表中过滤
【发布时间】：2019-08-22 06:30:40
【问题描述】：

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

接下来我正在为 react-bootstrap 表中的所有列过滤器设计寻找一个文本搜索框，我找到了这个示例

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

这是我的过滤方法=>

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
  })
}

这是我的桌子 =>

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

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

【问题讨论】：

只使用 setState 和它的罚款。

标签： reactjs react-bootstrap-table

【解决方案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) {
  //...
  })

【讨论】：