在按钮单击ReactJs时从数组的输入中获取值

Question

我对ReactJs比较陌生，在尝试创建真实世界的应用程序时正在学习React。 这是我无法解决的。 我有一个具有一个输入和一个按钮的重复组件。 每次单击该按钮时，输入的值将在一个功能中使用。

在Angular中，我不必担心如何传递这些值，因为在ngFor中，我们可以直接从ngModel中分配值。 但是React中没有这样的概念。

 betOnTeam = (_id, coins) => {
    return;
};

 {this.teamList.map(team => (
    <div key={team._id}>
       <input type="number" min="100" max="5000"  />
       <button type="button"
               onClick={() => this.betOnTeam(team._id,//value from the 
   input above)}> 
    </div>
  ))}

因此，基本上，我具有准备接收ID以及用户下注多少枚硬币的功能。 从图片中可以看到，我有很多输入，其中应该包含用户为特定团队投入的硬币数量的值。 每个按钮都将触发此betOnTeam功能，并将传递团队的唯一ID，以及数字代表用户下注。 我如何为所有这些语言团队设置状态，因为它们都是动态的，可能是5个团队或100个团队。 有没有办法动态地做到这一点？

例如，用户输入5000，当他单击按钮时，id和值将被传递到betOnTeam函数中。

我希望这可以澄清我的问题。

=================================谢谢大家的投入。

我让它与您的所有建议结合在一起工作。

所以这是我的工作：

 betOnTeam = (event, id) => {
    console.log(event.target[0].value, id);
    return;
};

 {this.teamList.map(team => (
    <form key={team._id} onSubmit={(e) => this.betOnTeam(e,team._id)}>
       <input type="number" min="100" max="5000"  />
       <button type="submit"> 
    </form >
  ))}

Answer 1

好像您真的很亲近。 我认为这最终取决于您要如何构建组件。 有一个简单的方法可以做到这一点（更多的是React），而有一个困难的方法。

最简单的方法是将.map()内部创建的标记拆分为自己的组件。 每个团队都有一个单独的组件，因此state被封装到其自己的组件中。 通过这样做，您可以有效地跟踪每个团队的投入。

以下面的沙箱为例： https : //codesandbox.io/s/dazzling-roentgen-jp8zm

我们可以为标记创建一个组件，如下所示：

球队

import React from "react"

class Team extends React.Component {
  state = {
    betValue: 100
  };

  handleOnChange = e => {
    this.setState({
      betValue: e.target.value
    });
  };

  handleOnClick = () => {
    this.props.betOnTeam(this.state.betValue, this.props.id);
  };

  render() {
    const { id } = this.props;
    const { betValue } = this.state;
    return (
      <div key={id}>
        <input
          type="number"
          min="100"
          max="5000"
          value={betValue}
          onChange={this.handleOnChange}
        />
        <button onClick={this.handleOnClick} type="button">
          Bet
        </button>
      </div>
    );
  }
}

export default Team;

因此，从纯粹的jsx角度来看，标记是相同的，但现在它包含在类组件中。

• 现在我们可以以controlled方式跟踪输入。 当我们准备下注时，该值将存储在单个组件状态中。
• 我们将两个属性分别传递给每个Team组件： team_id和betOnTeam函数。 该team_id可以使用访问this.props.id同样地，我们将它传递到this.props.betOnTeam()在需要时。

主要成分

import React from "react"
import Team from "./Team"

class App extends React.Component {
  teamList = [
    { team_id: 1, name: "TSM" },
    { team_id: 2, name: "SKT" },
    { team_id: 3, name: "CLG" }
  ];

  betOnTeam = (betValue, teamId) => {
    console.log(betValue);
    console.log(teamId);
  };

  render() {
    return (
      <div>
        {this.teamList.map(team => (
          <Team id={team.team_id} betOnTeam={this.betOnTeam} />
        ))}
      </div>
    );
  }
}

因此.map()为每个团队渲染一个Team组件，并传入其各自的ID和betOnTeam函数作为betOnTeam 。 单击组件内部的按钮后，我们可以将存储在团队组件中的值传递回去，以执行betOnTeam 。

Answer 2

的onClick = {this.betOnTeam（form._id，值）}

不要一开始就执行this.betOnTeam ，实际上是将点击处理程序设置为this.betOnTeam(form._id,value)的返回结果。 在React中，它与Angular中的不完全相同。 为此，您需要将其设置为等于执行此操作的函数。 像这样：

onClick={() => this.betOnTeam(form._id,value)}

希望这可以帮助。

Answer 3

1. this.betOnTeam = (_id, value) => { ... }

2. constructor(props) { this.betOnTeam.bind(this) }

3. onClick = { () => this.betOnTeam(form._id, value)}

好吧，如果您使用onClick = {this.betOnTeam（form._id，value）}，那么代码将首先执行，并且在betOnTeam函数中，您将不会使用“ this”运算符。

但是，如果使用上述方法，则可以在函数中使用“ this”并获得良好的结果。

而且您的代码中有一些错误需要修复，

{this.array.map(form => (
    <div key={form._id}>
       <input name={`editform{form._id}`} type="number" min="100" max="5000" onChange={(e) => this.changeNumber(e, form._id) }/>
       <button type="button"
               onClick={this.betOnTeam(form._id,value)}> 
    </div>
))}

在changeNumber函数中，应该使用setState（{}）函数将值设置为状态，而在betOnTeam函数中，可以使用已经设置的状态。

代码必须是这样的，否则您可以使用ref，但是在形式上不鼓励使用ref。 完全应该使用ControlledComponent。 这就是目标。

希望您能解决问题。