反应多个过滤器下拉列表

Posted 2023-02-27

【中文标题】反应多个过滤器下拉列表

【英文标题】：React multiple filter dropdowns

【发布时间】：2016-02-10 15:36:45

【问题描述】：

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

demo

我的代码示例

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

【参考方案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

希望对你有帮助！