我是reactjs的新手，我想建立一个表单，该表单的值最初是从API响应中获取的，然后用户可以在保存表单之前对表单的字段进行更改。在此，当用户更改本金时，半额，期初余额和期末余额应根据用户的输入。我可以更改字段，但是它们是用户输入后的一种状态更改。我认为这是因为 setState 的异步特性，但是对于我的示例，我不知道如何处理回调。我想知道如何解决此问题。 我的代码的链接为here
import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class App extends Component {
constructor(props) {
super();
this.state = {
get_interest: 5,
get_principal: 5,
get_starting_balance: 10,
get_closing_balance: 0,
get_emi_date: "2018-09-12",
get_emi_amount: 0,
field: "",
get_schedule: [
{
amount: 2000,
principal: 0,
discount: 0,
date: "2019-01-06",
interest: 0,
starting_balance: 1000,
closing_balance: 0
},
{
amount: 3000,
principal: 0,
discount: 0,
date: "2019-02-06",
interest: 0,
starting_balance: 1500,
closing_balance: 0
}
]
};
}
handleAmortScheduleChange = (key, field) => e => {
const value = e.target.value;
const { get_schedule, get_emi_amount } = this.state;
const old_schedule = get_schedule[key];
const new_get_schedule = [...get_schedule];
console.log(old_schedule);
new_get_schedule[key] = {
...old_schedule,
[field]: value,
amount: get_emi_amount,
closing_balance: old_schedule.starting_balance - get_emi_amount
};
this.setState(
{
get_schedule: new_get_schedule,
get_emi_amount:
parseInt(new_get_schedule[key].principal) +
parseInt(new_get_schedule[key].interest)
// [get_schedule[key][field]]: value,
// [get_emi_amount]: get_schedule[key]["principal"] + get_schedule[key]["interest"],
// [get_schedule[key]["closing_balance"]]: get_schedule[key]["starting_balance"] - get_emi_amount,
},
() => {
console.log(this.state.get_schedule);
console.log(this.state.old_schedule);
}
);
var arr = document.getElementsByName("get_schedule_principal_here");
var tot = 0;
for (var i = 0; i < arr.length; i++) {
if (parseInt(arr[i].value)) tot += parseInt(arr[i].value);
}
document.getElementById("get_total_principal").value = tot;
var arr_interest = document.getElementsByName("get_schedule_interest_here");
var tot_interest = 0;
for (var i = 0; i < arr_interest.length; i++) {
if (parseInt(arr_interest[i].value))
tot_interest += parseInt(arr_interest[i].value);
}
document.getElementById("get_total_interest").value = tot_interest;
};
render() {
const { get_schedule, get_emi_amount } = this.state;
return (
<div className="App">
{this.state.get_schedule.map((row, key) => (
<div key={key} className="row aaaa">
<div className="getAmort-form-group col-xs-12 col-sm-12 col-md-2 col-lg-2">
<input
ref="get_schedule_emi_date"
type="date"
required="required"
id="get_schedule_emi_date"
value={row.date}
/>
<label for="input" className="getAmort-control-label">
EMI Date
</label>
<i className="getAmort-bar" />
</div>
<div className="getAmort-form-group col-xs-12 col-sm-12 col-md-2 col-lg-2">
<input
ref="get_schedule_emi_amount"
type="number"
required="required"
id="get_schedule_emi_amount"
value={get_schedule[key].amount}
/>
<label for="input" className="getAmort-control-label">
EMI Amount
</label>
<i className="getAmort-bar" />
</div>
<div className="getAmort-form-group col-xs-12 col-sm-12 col-md-2 col-lg-2">
<input
ref="get_schedule_principal"
type="number"
required="required"
id="get_schedule_principal"
name="get_schedule_principal_here"
value={get_schedule[key].principal}
onChange={this.handleAmortScheduleChange(key, "principal")}
/>
<label for="input" className="getAmort-control-label">
Principal
</label>
<i className="getAmort-bar" />
</div>
<div className="getAmort-form-group col-xs-12 col-sm-12 col-md-2 col-lg-2">
<input
ref="get_schedule_interest"
type="number"
required="required"
id="get_schedule_interest"
value={get_schedule[key].interest}
onChange={this.handleAmortScheduleChange(key, "interest")}
/>
<label for="input" className="getAmort-control-label">
Interest
</label>
<i className="getAmort-bar" />
</div>
<div className="getAmort-form-group col-xs-12 col-sm-12 col-md-2 col-lg-2">
<input
ref="get_schedule_starting_balance"
type="number"
required="required"
id="get_schedule_starting_balance"
value={row.starting_balance}
/>
<label for="input" className="getAmort-control-label">
Starting Balance
</label>
<i className="getAmort-bar" />
</div>
<div className="getAmort-form-group col-xs-12 col-sm-12 col-md-2 col-lg-2">
<input
ref="get_schedule_closing_balance"
type="number"
required="required"
id="get_schedule_closing_balance"
value={get_schedule[key].closing_balance}
/>
<label for="input" className="getAmort-control-label">
Closing Balance
</label>
<i className="getAmort-bar" />
</div>
</div>
))}
<div className="row">
<div className="getAmort-form-group col-xs-12 col-sm-12 col-md-2 col-lg-2">
<input type="number" required="required" id="get_total_principal" />
<label for="input" className="getAmort-control-label">
Total Principal
</label>
<i className="getAmort-bar" />
</div>
<div className="getAmort-form-group col-xs-12 col-sm-12 col-md-2 col-lg-2">
<input type="number" required="required" id="get_total_interest" />
<label for="input" className="getAmort-control-label">
Total Interest
</label>
<i className="getAmort-bar" />
</div>
</div>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);