反应多个过滤器下拉列表答案

【问题标题】：React multiple filter dropdowns反应多个过滤器下拉列表
【发布时间】：2016-02-10 15:36:45
【问题描述】：

我有 React 应用程序，您可以在其中根据几个不同的属性过滤列表。目前我可以一次过滤每个类别，但我想一次过滤多个类别，因此当您选择更多过滤器时，列表会越来越小。然后，当您清除所有值时，它将返回到原始列表。我怎样才能做到这一点？

我的代码示例

getInitialState: function() {
  return {
    data: this.props.data,
    bender: '',
    nation: '',
    person: '',
    show: ''
  }
},
filterItems: function(val, type) {
   switch (type) {
    case 'bender':
      this.setState({bender: val});
      break;
    case 'nation':
      this.setState({nation: val});
      break;
    case 'person': 
      this.setState({person: val});
      break;
    case 'show':
      this.setState({show: val});
      break;
    default:
      break;
  }
  var filteredItems;
  if (val) {
    filteredItems = this.props.data.filter(function(item) {
      return item[type] === val;
    });
  } else {
    filteredItems = this.props.data;
  }
  this.setState({data: filteredItems});
}

【问题讨论】：

标签： javascript filter reactjs

【解决方案1】：

您的代码一次仅按一个条件进行过滤。您需要遍历四个条件并累积过滤：

["bender", "nation", "person", "show"].forEach(function(filterBy) {
  var filterValue = state[filterBy];
  if (filterValue) {
    filteredItems = filteredItems.filter(function(item) {
      return item[filterBy] === filterValue;
    });
  }
});

完整代码：

http://codepen.io/foxdonut/pen/GpwRJB?editors=001

希望对你有帮助！

【讨论】：