Javascript 如何管理每行动态创建的按钮的功能？

我正在开发一个示例在线贷款应用程序，我需要做的是用我拥有的值填充表行，并且每行都有一个按钮“extend”，如果按下该按钮，应该会更改值。我的问题是，按钮是在循环中创建的，我不知道如何使它影响同样在同一个循环中填充的值，所以总结起来，我想做的是，例如，当值为=10时，如果我按下按钮，我想将其更改为20，这是我到目前为止的结果

export default class History extends React.Component {

 constructor(props) {
   super(props)
   this.state = {
     extended:false // refers to having the loan extended or not
   };
 }

/* change state variable on extend button press */
  extend() {
    this.setState({
        extended: true
    });
  }

  render() {
    var items = this.props.loan;
    var that = this;
    var extendBtn = <a class="waves-effect waves-light btn small green     lighten" onClick={that.extend.bind(that)}>Extend!</a>;
    var itemslist = items.map( function(item, index) {
      var value = item.moneyDue; // Money to be paid
      var date = item.PayDay;    // Date of payment
      var days = item.daysNo;    // Number of loan days
      var extensionAmount = item.extension;
      return(
        <tr key={index}>
          <td>{item.moneyBorrowed} Eur</td>
          <td>{days}</td>
          <td>{value} Eur</td>
          <td>{date}<span>{extendBtn}</span></td>
        </tr>
      );
    })

    return (
      <div class="row">
        <div class="col s12">
          <div class="card blue lighten-5">
            <div class="card-content">
              <table class="bordered highlight">
                <thead>
                  <tr>
                    <th data-field="id">Amount Borrowed</th>
                    <th data-field="name">Days</th>
                    <th data-field="price">Total Due</th>
                    <th data-field="price">Payment Date</th>
                  </tr>
                </thead>
                <tbody>
                  {itemslist}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

---

使用flux或redux应该非常简单。 在您的情况下，您需要在选项卡中创建一个新函数来设置状态。例如：

constructor(props) {
    super(props)
    this.state = {
      loan:[]
    };
    this.updateState = this.updateState.bind(this);
  }

updateState(loanData) {
    this.state = {
      loan: loanData
    };
  }

您应该将此函数作为道具传递给历史组件

<History updateState={this.updateState} loan={this.state.loan} />

同时将此行更改为：

var extendBtn = <a class="waves-effect waves-light btn small green lighten" onClick={that.extend.bind(that, index)}>Extend!</a>;

var extendBtn=Extend！；

将此行放在items.map中

---

这应该能奏效。我没有足够的时间来测试代码。它可能不完全正确。

这对于flux或redux应该非常简单。 在您的情况下，您需要在选项卡中创建一个新函数来设置状态。例如：

constructor(props) {
    super(props)
    this.state = {
      loan:[]
    };
    this.updateState = this.updateState.bind(this);
  }

updateState(loanData) {
    this.state = {
      loan: loanData
    };
  }

您应该将此函数作为道具传递给历史组件

<History updateState={this.updateState} loan={this.state.loan} />

同时将此行更改为：

var extendBtn = <a class="waves-effect waves-light btn small green lighten" onClick={that.extend.bind(that, index)}>Extend!</a>;

var extendBtn=Extend！；

将此行放在items.map中

---

这应该能奏效。我没有足够的时间来测试代码。它可能不完全正确。

只是好奇，你为什么不将

项目列表

的生成移动到另一个类中，这样你就可以更容易地独立跟踪这些内容？@A.Lau是的，这确实是有道理的，谢谢，但我仍然不知道如何解决提到的问题，你能帮忙吗？好吧，你将它移动到一个类中，每个类都可以跟踪它们的

this.props

及其on

onClick

函数。如果它适用于1，那么它应该适用于所有人。这就是使用类的美妙之处。您可以在迭代内部创建按钮，并将索引参数传递给它。这样你就知道哪个项目被点击了。@mitchken我似乎被卡住了，我的大脑正在经历愚蠢的时刻，我对react仍然很陌生，所以我对每件事都有点困惑，你能给我举个例子吗，这会让事情变得很清楚很好奇，你为什么不把

项目列表

的生成移到另一个类中，这样你就可以更容易地独立跟踪这些事情了？@A.Lau是的，这确实有道理，谢谢，但我仍然不知道如何解决提到的问题，你能帮我吗？好吧，你把它移到一个类中，每个类都可以跟踪它们的

this.props

及其on

onClick

函数。如果它适用于1，那么它应该适用于所有人。这就是使用类的美妙之处。您可以在迭代内部创建按钮，并将索引参数传递给它。这样你就知道哪个项目被点击了。@mitchken我似乎被卡住了，我的头脑正在经历愚蠢的时刻，我对react仍然很陌生，所以我对每件事都有点困惑，你能给我举个例子，让事情变得非常清楚吗