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); 
}