使用 onClick 时将输入值反应到数组不起作用答案

【问题标题】：React input value to array not working when using onClick使用 onClick 时将输入值反应到数组不起作用
【发布时间】：2017-12-13 01:26:42
【问题描述】：

我有一个数组，我想从用户的输入中添加一个新名称。在我的组件中，我有：

<div>
  <h4>Add A Player</h4>
  <input
    type="text"
    placeholder="Enter a new name"
    value={this.state.newPlayerName}
  />
  <button onClick={this.handleAddPlayer}>
     Press to Add Player
  </button>
</div>

除名称外，与此功能一起使用：

handleAddPlayer = e => {
  const players = this.state.players.slice(0);
  players.push({
    name: '',
    id: getRandomInt(20, 55)
  });
  this.setState({
    players: players,
    newPlayerName: e.target.value
  });
};

我试图在用户输入名称并提交时得到，它会在更新数组的函数中更新（如果这有意义，道歉，因为这对我来说仍然很新）。

在我的状态下，我有：

this.state = {
  id: players.id,
  totalScore: 0,
  countInfo: [],
  evilName: '',
  color: '#6E68C5',
  scoreColor: '#74D8FF',
  fontAwe: 'score-icon',
  incrementcolor: '',
  scoreNameColor: 'white',
  glow: '',
  buttonStyle: 'count-button-start',
  newPlayerName: '',
  players
};

我不确定如何获取输入以将名称（或字符串）传递给数组，有人可以帮忙吗？

【问题讨论】：

标签： javascript arrays reactjs ecmascript-6

【解决方案1】：

首先，您将绑定的输入更新处理程序添加到错误的元素！您当前已将其附加到按钮，您必须将其附加到输入！在您的输入中添加一个onChange 处理程序，以便在您每次更改输入时更新值：

<input
  type="text"
  placeholder="Enter a new name"
  value={this.state.newPlayerName}
  onChange={this.handleChange}
/>

然后创建一个处理更改的新方法：

handleChange = e => {
  this.setState({
    newPlayerName: e.target.value
  });
}

这将让 React 控制输入，并将输入值设置为 state，以便在添加新玩家时使用它。然后，设置处理程序以在点击时添加新玩家。无需切片、推送、重置，只需使用数组扩展语法：

handleAddPlayer = e => {
  this.setState(prevState => ({
    players: [...prevState.players, {
      name: this.state.newPlayerName
      id: getRandomInt(20, 55)
    }]
  }));
}

这会将players 设置为先前状态的players 属性加上带有name 这是输入值和随机id 的新玩家对象。

【讨论】：