Javascript 如何管理每行动态创建的按钮的功能?
我正在开发一个示例在线贷款应用程序,我需要做的是用我拥有的值填充表行,并且每行都有一个按钮“extend”,如果按下该按钮,应该会更改值。我的问题是,按钮是在循环中创建的,我不知道如何使它影响同样在同一个循环中填充的值,所以总结起来,我想做的是,例如,当值为=10时,如果我按下按钮,我想将其更改为20,这是我到目前为止的结果Javascript 如何管理每行动态创建的按钮的功能?,javascript,arrays,function,loops,reactjs,Javascript,Arrays,Function,Loops,Reactjs,我正在开发一个示例在线贷款应用程序,我需要做的是用我拥有的值填充表行,并且每行都有一个按钮“extend”,如果按下该按钮,应该会更改值。我的问题是,按钮是在循环中创建的,我不知道如何使它影响同样在同一个循环中填充的值,所以总结起来,我想做的是,例如,当值为=10时,如果我按下按钮,我想将其更改为20,这是我到目前为止的结果 export default class History extends React.Component { constructor(props) { super
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
及其ononClick
函数。如果它适用于1,那么它应该适用于所有人。这就是使用类的美妙之处。您可以在迭代内部创建按钮,并将索引参数传递给它。这样你就知道哪个项目被点击了。@mitchken我似乎被卡住了,我的大脑正在经历愚蠢的时刻,我对react仍然很陌生,所以我对每件事都有点困惑,你能给我举个例子吗,这会让事情变得很清楚很好奇,你为什么不把项目列表
的生成移到另一个类中,这样你就可以更容易地独立跟踪这些事情了?@A.Lau是的,这确实有道理,谢谢,但我仍然不知道如何解决提到的问题,你能帮我吗?好吧,你把它移到一个类中,每个类都可以跟踪它们的this.props
及其ononClick
函数。如果它适用于1,那么它应该适用于所有人。这就是使用类的美妙之处。您可以在迭代内部创建按钮,并将索引参数传递给它。这样你就知道哪个项目被点击了。@mitchken我似乎被卡住了,我的头脑正在经历愚蠢的时刻,我对react仍然很陌生,所以我对每件事都有点困惑,你能给我举个例子,让事情变得非常清楚吗