在按鈕單擊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。 這就是目標。

希望您能解決問題。