javascript - 我如何在 react 中应用多个过滤器？

Question

如何过滤包含多个字段的列表？我拥有的程序有一个数据列表，其中有 2 个过滤器:work 和 city，但是如果我选择两者，它不会同时使用它只过滤的两个字段先前选择的字段。

如何让这个程序过滤这两个字段？

Answer 1

您可以在 render() 函数和 filter 中使用局部变量两次，具体取决于所述过滤器是否打开。

---

我在下面发布了一个简单的演示。输入全名或城市以过滤列表。

class MyApp extends React.Component {

  constructor() {
    super();
    this.state = {
      filterName: "",
      filterCity: "",
      friends: [
        {id: 1, name: "Carl", city: "New York"},
        {id: 2, name: "Anna", city: "New York"},
        {id: 3, name: "Carl", city: "Sydney"}
      ]
    };
  }
  
  changeFilterName = (e) => {
    this.setState({filterName: e.target.value});
  }
  
  changeFilterCity = (e) => {
    this.setState({filterCity: e.target.value});
  }
  
  render() {
    let friends = this.state.friends.slice();
    if(this.state.filterName) {
      friends = friends.filter(item => item.name.toLowerCase() == this.state.filterName.toLowerCase());
    }
    if(this.state.filterCity) {
      friends = friends.filter(item => item.city.toLowerCase() == this.state.filterCity.toLowerCase());
    }
    return(
      <div>
        <label for="name">Name: </label>
        <input id="name" onChange={this.changeFilterName} value={this.state.filterName} />
        <label for="city">City: </label>
        <input id="city" onChange={this.changeFilterCity} value={this.state.filterCity} />
        <ul>
          {friends.map(item => <li key={item.id}>{item.name + " - " + item.city}</li>)}
        </ul>
      </div>
    );
  }
}

ReactDOM.render(<MyApp />, document.getElementById("myApp"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="myApp"></div>