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
        },
        {

标签： java

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