React 使用 .push 通过 onClick 添加到数组

Posted 2023-02-22

【中文标题】React 使用 .push 通过 onClick 添加到数组

【英文标题】：React use .push to add to an array with onClick

【发布时间】：2017-12-13 00:49:38

【问题描述】：

我正在尝试添加到我现有的名为 player 的数组（这是一个外部文件“players.js”，已导入我的父级）。

我会写：

 players.push(
  name: 'Maul',
  id: 26
);

这可以作为 ID 用于键并且名称在数组中更新。

但是如果我写

   handleAddPlayer = () => 
    console.log('i am working');
    players.push(
      name: 'Maul',
      id: 26
    );
  ;

我的按钮上有

    <div>
      <h4>Add A Player</h4>
      <input />
      <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',
  players,
;

它不起作用。

从这里我有两个问题：

为什么我点击按钮不更新，但之前不能作为功能使用？

我想在输入中输入一个名称并生成一个唯一键，并将其添加到我的数组 player.js 中

我尝试过连接，但没有取得很大成功。

【问题讨论】：

您能告诉我们您遇到的错误吗？不是“无法读取未定义的属性‘push’”吗？

我没有收到任何错误，因为没有任何反应

【参考方案1】：

Players 是状态对象的一个​​属性，因此您需要调用 setState 来更新该属性：

handleAddPlayer = () => 
  // create a clone of your array of players; don't modify objects on the state directly
  const players = this.state.players.slice(0);

  players.push(
    name: 'Maul',
    id: 26
  );

  this.setState(
    players: players,
  );
;

【讨论】：

好吧，这就像一个魅力，我也学到了很多东西，所以谢谢你！您能否帮助我理解 <input> 如何将值传递到名称中并且 id 可以是唯一数字？

等等，我得到了随机的#，我想通了。现在只需将值从 <input> 传递到 name: 区域

看看facebook.github.io/react/docs/forms.html#controlled-components，一种方法是在状态上添加一个属性，例如value，它维护文本输入的值，然后将您的输入更新为@987654328 @。那么你的handleAddPlayer方法就可以简单的看一下this.state.value来提取输入框中的值。