Question

我处于这种状态，我想以动态方式更新属性name和location。

this.state = {
  players: [{
    name: '',
    location: ''
  },
  {
    name: '',
    location: ''
  }]
}

这个想法是您可以单击一个按钮来添加另一个/删除播放器。对于每个玩家，这些输入字段都应该出现（这是我实现的），但是我无法更改更改状态。

最好是这样的东西（但是我无法使它适用于这种特殊情况）。当然，除非有更好的方法来实现这一目标（我在React中还是个新手）。

this.handleChange = (event) => {  let obj = {...this.state.obj }; obj [event.target.name] = event.target.value; this.setState({obj }); }

任何帮助将不胜感激！

Answer 1

您可以将临时ID值添加到玩家列表，并在更改时传递目标ID，并更改字段，并相应地更改状态


const onPlayerChange = ({target : { id , name , vlaue}}) =>{
   const newPlayersState = this.state.players.map(player=>{
      if(player.id === id) return {...player,[name]:value}
      return player;
   })
   this.setState({players:newPlayersState})
}

Answer 2

addPlayer(name, location) {
  const players = {...this.state.players};
  players.push({
    name,
    location
  });
  this.setState({
    players
  });
}

removePlayer(name) {
  const players = {...this.state.players};
  this.setState({
    players: players.filter(p => p.name != name)
  });
}

如何在React中更新数组中的状态变量？

2 个答案: