如何在React中將多個表單輸入結果添加到數組狀態

Question

我是一個全能的新編碼器，並試圖通過構建一個計算多少現金（我的孩子可以使用的應用）的小應用來學習React。我動態地創建了5個組件，每個組件都有一個輸入字段。這些輸入字段接受一個條目（一個數字），並將該輸入乘以我從映射出的5個組件中的每一個的對象（固定金額20美元，10美元，5美元，2美元和1美元）的固定金額。這部分工作很好。 $ 10 x 2給我20美元。

但是，當他們被鍵入時總計所有5個賬單總額總和，我想我需要把它們放入一個數組，然後獲得數組的總和以顯示最終的總和。事情並不奏效，上週我一直在尋找一種方法來編寫我的onChange處理程序。我只是堅持住了。任何幫助將非常感激。對於任何難以閱讀的代碼，我非常抱歉。

這裏的jsfiddle（請原諒缺乏的造型）

Answer 1

我能夠通過打開javascript控制檯（F12或右鍵單擊 - >檢查）輕鬆地找到錯誤。

拋出的錯誤，因爲你確實通過handleCashInput爲道具，以CashItemsList

<CashItemsList key={bill.id} bill={bill} onChange={this.handleCashInput} />

而且使用與減少的陣列不是一個好主意，因爲如果你刪除的數量和重新輸入，總數將是錯誤的。我做了以下解決它：

1. 我使用對象而不是數組
   { 1: 0, 2: 0, 3: 0, 4: 0, 5: 0}

2. 我通過法案id來handleCashInput的，以便能夠改變量this.props.onChange(this.props.bill.id, newBillSubTotal)

3. 我更新對象中的正確票據價值，像這樣
   const cashTemp = this.state.billFinalTotal;
cashTemp[id] = newBillFinalTotal;
4. 我通過添加對象的每個值一起
   const bt = this.props.billFinalTotal;
const total = bt[1] + bt[2] + bt[3] + bt[4] + bt[5];

計算的總這是我JSFiddle

Answer 2

你在你的提琴有兩個問題。

首先，您沒有將onChange prop傳遞給Parent的CashItemsList。因此，我改變：

<CashItemsList key={bill.id} bill={bill} /> 

到：

<CashItemsList key={bill.id} bill={bill} onChange={this.handleCashInput} /> 

的第二個問題是，的Array.push的回報（）不是全陣列，所以在你的「handleCashInput（）」的父類的方法使用array.concat（）代替的Array.push（）解決了這個問題，通過這樣的：

const cashTemp = this.state.billFinalTotal.push(newBillFinalTotal) 

到：

const cashTemp = this.state.billFinalTotal.concat(newBillFinalTotal) 

這裏有一個更新的提琴的作品：https://jsfiddle.net/ggtu71gh/1/

注：它似乎並不認爲你已經實現了分類彙總功能，所以這只是嘗試修復你已經實施了錯誤。