javascript - 清除输入后无法重置过滤器( react )

Question

有过滤器，过滤没问题，但是当清除输入时。我看到过滤结果:

filterList(event) {
    var updatedList = this.state.items;
    if (event.target.value !== '') {
    updatedList = updatedList.filter(function(item){
      return item.name.toLowerCase().indexOf(event.target.value.toLowerCase()) !== -1;
    });
  }
    this.setState({items: updatedList});  // now this.state.items has a value
   }

我的条件不起作用。

https://plnkr.co/edit/dPZM9BZVa4uzEMwdNpZ8?p=catalogue script.js 中的完整组件

Answer 1

对此有更好的方法。您通常不想使用 props 直接设置您的状态。您想要的是仅将状态用于过滤的项目集，因为您的 Prop 将始终包含完整的项目集。首先，删除 componentWillReceiveProps 函数。然后更改以下内容:

// in your constructor
this.state = {
  filteredItems: false
}

filterList(e) {
  var value = e.target.value;

  this.setState({
    filteredItems: !value
      ? false
      : this.props.items.filter(function(item) {
        return item.name.toLowerCase().indexOf(value.toLowerCase()) > -1
      })
  })
}

// inside render
var elems = this.state.filteredItems || this.props.items