React.JS处理状态中的两个值

Question

我试图从两个输入中进行数学运算。首先更新状态，然后添加具有新更新状态的两个值。

<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状态正确。肯定不明白为什么第一个代码不起作用。

Answer 1

您不应该直接使用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); 
}