如何管理每行的動態創建按鈕的功能？

我正在處理一個樣本在線貸款應用程序，我需要做的是使用我所擁有的值填充錶行，並且每行都有一個「擴展」按鈕，如果按下該按鈕將更改這些值。我的問題是，該按鈕被創建在循環中，我不知道如何使它影響同樣循環中填充的值，所以總結一下我想要做的是例如當value = 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 
    }); 
    }

來源

2017-01-12 user3209048

只是好奇，你爲什麼不把'itemlist'生成移動到另一個類中，這樣你就可以更容易地跟蹤這些事情呢？ –

@ A.Lau是啊，這實際上是有道理的，謝謝，但我仍然不知道如何解決上述問題，你能幫忙嗎？ – user3209048

好吧，你把它移到一個類中，每個類都可以跟蹤他們的'this.props'和他們onClick函數。如果它適用於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} />

那麼你的歷史記錄部件裏面你應該更新你的函數是這樣的：

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

這應該可以做到。我沒有足夠的時間來測試代碼。它可能不完全正確。

來源

2017-01-12 10:39:33

如何管理每行的動態創建按鈕的功能？

回答

相關問題