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
   }

我的病情不起作用。

script.js中的

http://www.bootply.com/rPp3iqob5d完整组件

Answer 1

这是一个更好的方法。您通常不想使用道具直接设置您的州。你想要的只是对过滤的项目集使用状态，因为你的道具将始终包含完整的项目集。首先，删除您的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

清除输入后无法复位滤波器（反应）

1 个答案: