Question

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

但是为什么在清除文本框后未在表中显示所有数据？

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) {
  //...
  })

在React Bootstrap表中过滤

1 个答案: