Javascript 使用onClick时，将输入值反应为数组不工作

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

<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>

我试图获取当用户输入一个名称并提交它时，它会在更新数组的函数中更新（如果这有意义，请道歉，因为这对我来说还是很新的）

在我的州，我有：

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

---

我不知道如何让输入将名称（或字符串）传递给数组，有人能帮忙吗？

首先，您将绑定输入更新处理程序添加到了错误的元素！您当前已将其连接到按钮，您必须将其连接到输入！在输入中添加

onChange

处理程序，以便在每次更改输入时更新值：

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

这将让React控制输入，并将输入值设置为state，以便在添加新播放器时使用它。然后，设置处理程序以在单击时添加新的播放器。不用切片、推送、重置，只需使用数组排列语法：

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

这将

players

设置为前一状态的

players

属性加上带有

名称的新player对象，该名称是输入值和随机
id

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

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