React.JS处理状态中的两个值
问题描述:
我试图从两个输入中进行数学运算。首先更新状态,然后添加具有新更新状态的两个值。React.JS处理状态中的两个值
<input type="number" onChange={this.handleIncomeChange.bind(this)} value={this.state.income} />
这个代码不工作:(结果总是在后面一个数字)
handleIncomeChange(e) {
this.setState({income: e.target.value});
this.state.resultMonth = +this.state.income - +this.state.expense;
}
此代码工作:
handleIncomeChange(e) {
const income = e.target.value;
this.state.resultMonth = +income - +this.state.expense;
this.setState({income: e.target.value});
}
不知道如果我的理解作出反应的概念。 JS状态正确。肯定不明白为什么第一个代码不起作用。
答
您不应该直接使用this.state =
修改状态(状态初始化期间除外)。使用setState
API进行所有状态修改。
例如:
handleIncomeChange(e) {
const newIncome = e.target.value;
this.setState({
income: newIncome,
resultMonth: newIncome - this.state.expense
});
}
更新:基于由OP在下面注释中描述的codepen和问题。
你可以做下面的事情来解决可重用性的问题。
handleDataChange(income, expense) {
this.setState({
income: income,
expense: expense,
resultMonth: income - expense
});
}
handleIncomeChange(e) {
const newIncome = e.target.value;
this.handleDataChange(newIncome, this.state.expense);
}
handleExpenseChange(e) {
const newExpense = e.target.value;
this.handleDataChange(this.state.income, newExpense);
}
'handleIncomeChange(E){ \t \t常量newIncome = e.target.value; \t \t this.setState({ \t \t \t收入:newIncome, \t \t \t resultMonth:newIncome - this.state.expense \t \t}); \t \t this.showinfo() \t} \t showinfo(){ \t \t的console.log(resultMonth); \t}' 如果我使用这个函数,它仍然“落后一步”。你知道如何正确地做到这一点? –
'this.setState'不能保证同步执行,因此如果你在调用'this.setState'后直接登录'this.state',你不能保证看到更新后的结果。相反,您需要通过'render()'或者其中一个生命周期方法(例如'componentWillUpdate(nextProps,nextState)')来访问更新后的状态。你在'showInfo'中想做什么?如果你用这个更新你的问题,我可以提出建议。很有可能你可以在'render()'中处理这个问题。 – ctrlplusb
'showInfo'仅用于测试目的。我想要实现具有许多输入的表单,其中每次更改都会触发一个用更新值进行数学运算的函数。就像:'calculate {this.state.expense - this.state.income + this.state.tax}' –