Question

我正在研究一个在线贷款申请示例，我需要做的是我用我拥有的值填充表格行，并且每行都有一个“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>
    );
  }
}

来自父类的贷款数据

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
    });
   }

Answer 1

这应该与flux或redux相当简单。在您的情况下，您需要在Tabs中创建一个新功能来设置状态。例如：

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

然后在History组件中，你应该将你的功能更新为：

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中。

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

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

1 个答案: