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

ChatListItem

Answer 2

Error is you are not filtering and updating selectedPlayers array based on previousState and selected Player。这是您问题的有效解决方案。

class FootballStats extends React.Component {
  constructor(props) {
    super(props);
    this.state = { footballStats: [], selectedPlayers: [] };
  }

  componentDidMount() {
    let data = {
      footballStats: [
        {
          ID: 1,
          NAME: "Phil Jones",
          TEAMCODE: "MNU",
          W: "17",
          L: "2"
        },
        {
          ID: 2,
          NAME: "Chris Smalling",
          TEAMCODE: "MNU",
          W: "20",
          L: "4"
        },
        {
          ID: 3,
          NAME: "Luke Shaw",
          TEAMCODE: "MNU",
          W: "12",
          L: "7"
        }
      ]
    };
    this.setState({ footballStats: data.footballStats });
  }

  getSelectedPlayers(player) {
    let playerName = player.target.value;
    let isPlayerSeleted = true;
    this.state.selectedPlayers.forEach(player => {
      if(player.NAME === playerName)
        isPlayerSeleted = false;
    });
    if (isPlayerSeleted) {
      let updatedArray = this.state.footballStats.filter(
        p => p.NAME === playerName
      );
      this.setState(prevState => {
        let selectedPlayers = [...updatedArray, ...prevState.selectedPlayers];
        return { selectedPlayers };
      });
    }
  }
  render() {
    let names = this.state.footballStats;
    let optionItems = names.map(item => (
      <option key={item.NAME}>{item.NAME}</option>
    ));

    return (
      <div>
        <br />
        <select onChange={e => this.getSelectedPlayers(e)}>
          {" "}
          {optionItems}
        </select>
        <br />
        <br />
        {this.state.selectedPlayers.length > 0 ? (
          <table border={1}>
            <tbody>
              <tr>
                <th>Code</th>
                <th>Player</th>
                <th>W</th>
                <th>L</th>
              </tr>
              {this.state.selectedPlayers.map(item => {
                return (
                  <tr key={item.TEAMCODE}>
                    <td>{item.TEAMCODE}</td>
                    <td>{item.NAME}</td>
                    <td>{item.W}</td>
                    <td>{item.L}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        ) : null}
      </div>
    );
  }
}

ReactDOM.render(<FootballStats />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root' />

如何基于下拉框选择过滤JavaScript React表

2 个答案: