我有一个包含足球运动员数据的表格,例如胜利、失败等。我还有一个球员姓名的下拉框。我希望能够从下拉框中选择一个玩家姓名并过滤表格以仅显示该表格中的数据。我尝试过使用 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
},
{
最佳答案
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;
})]})
}
}
关于java - 如何根据下拉框选择过滤 JavaScript React 表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55969776/