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

【问题标题】：How to manage the functionality of a dynamically created button with each row?如何管理每行动态创建的按钮的功能？
【发布时间】：2017-01-12 07:30:05
【问题描述】：

我正在处理一个示例在线贷款申请，我需要做的是用我拥有的值填充表格行，并且每一行都有一个“扩展”按钮，如果按下它应该会更改值。我的问题是按钮是在循环中创建的，我不知道如何让它影响在同一个循环中也填充的值，所以总结一下我想要做的是例如当值 = 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>
    );
  }
}

来自父类的贷款数据

export default class Tabs extends React.Component {

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

/* updates the state variables before passing to History */
  handler(money,daysCount,dueMoney,datePay,ext,date) {
    loanArray.push({
      moneyBorrowed:money,
      daysNo:daysCount,
      moneyDue: dueMoney,
      PayDay:datePay,
      extension:ext,
      dateMilli:date
    });
    this.setState({
      loan:loanArray
    });
   }

【问题讨论】：

只是好奇，您为什么不将itemlist 代移到另一个类中，以便您可以更轻松地独立跟踪事物？
@A.Lau 是的，这确实有道理，谢谢，但我仍然不知道如何解决上面提到的问题，你能帮忙吗？
你把它移到一个类中，每个类都可以跟踪他们的this.props 和他们的onClick 函数。如果它适用于 1，那么它应该适用于所有人。这就是使用类的美妙之处。
您可以在迭代内部创建按钮并将索引参数传递给它。这样您就知道点击了哪个项目。
@mitchken 我似乎被卡住了，我的头脑正在经历愚蠢的时刻，我对反应还很陌生，所以我对一切都很困惑，你能给我举个例子吗，那真的很清楚事情进展得很顺利

标签： javascript arrays function loops reactjs

【解决方案1】：

使用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} />

然后在您的历史组件中，您应该将您的函数更新为如下内容：

extend(index){
    this.setState({
        extended: true
    });
    this.props.loan[index] = "something";
    this.props.updateState(this.props.loan);
}

还将这一行更改为：

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

将此行放入您的 items.map 中。

这应该可以解决问题。我没有足够的时间来测试代码。它可能不完全正确。

【讨论】：