java - 如何根据下拉框选择过滤 JavaScript React 表

Question

我有一个包含足球运动员数据的表格，例如胜利、失败等。我还有一个球员姓名的下拉框。我希望能够从下拉框中选择一个玩家姓名并过滤表格以仅显示该表格中的数据。我尝试过使用 curr

class F
      this.state = { footballStats: [], selectedPlayers: []}
    }

     componentDidMount() {    
       fetch('http://localhost:3000/footballstats')
           .then((data) => data.json())
           .then((data) => this.setState( { footballStats: data, selectedPlayers: data } ));
           //.then((data) => this.setState( { footballStats: _.sortBy(this.state.footballStats, 'L') } ));

    }

  getSelectedPlayers(player) {
    if (!player) {
      this.setState({selectedPlayers: this.state.footballStats});
    }ayer;   
        })]})
    }
  }
    render() {
        let names = this.state.footballStats;
        let optionItems = names.map((item) =>
        <option key={item.NAME}>{item.NAME}</option>
        );

              <select onChange={(e) => this.getSelectedPlayers(e)}> {optionItems}
              </select>
              <br></br>
              <br></br>

          <table border={1}>
            <tbody>
              <tr><th></th><th>Code</th><th>Player</th><th>W</th><th>L</th> </tr>
              {this.state.selectedPlayers.map((item) => {
                return (<tr key={item.TEAMCODE}</td><td>{item.NAME}</td><td>{item.W}</td><td>{item.L}</td><td></tr>);
              })}
            </tbody>
      );
    }
}

  ReactDOM.render(<FootballStats/>, document.getElementById('root'));

{
    "footballStats": [
        {
            "ID": 1,
            "NAME": "Phil Jones",
            "TEAMCODE": "MNU",
            "W":  "17
        },
        {

Answer 1

getSelectedPlayers(e) {
    if (!!e.target.value) { //if the user selects the empty (the !! is a cast to boolean)
      this.setState({selectedPlayers: this.state.footballStats});
    }
    else {
      this.setState({selectedPlayers: [this.state.footballStats.find((p) => {
          return p.NAME = e.target.value;   
        })]})
    }
  }