如何在React中将多个表单输入结果添加到数组状态

Question

我是一个全新的程序员，我试图通过构建一个小型应用程序来计算React的现金（我的孩子可以使用的应用程序）来学习React。 我正在动态创建5个组件，每个组件都有一个输入字段。 这些输入字段接受一个条目（一个数字），并将该输入乘以我要从对象映射的固定金额（5个组成部分中的每个固定金额（$ 20，$ 10，$ 5，$ 2和$ 1固定金额））。 这部分效果很好。 $ 10 x 2显示$ 20。

但是，要在键入时将所有5个帐单金额总计加起来，我想我需要将它们放入一个数组中，然后获取该数组的总和以显示最终总计。 事情不起作用，上周我一直在寻找一种编码我的onChange处理程序的方法。 我只是被困住了。 任何帮助将不胜感激。 对于任何难以阅读的代码，我深感抱歉。

这是jsfiddle （请原谅缺少样式）

Answer 1

你的小提琴有两个问题。

首先，您没有将Parent的onChange道具传递给CashItemsList。 所以我改变了：

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

至：

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

第二个问题是array.push（）的返回值不是完整的数组，因此在Parent的“ handleCashInput（）”方法中，使用array.concat（）而不是array.push（）可以解决此问题这个：

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

至：

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

这是一个有效的更新小提琴： https : //jsfiddle.net/ggtu71gh/1/

注意：您似乎尚未实现小计功能，因此这仅试图修复已实现的错误。

Answer 2

我可以通过打开JavaScript控制台（F12或右键单击->检查）轻松找到错误。

引发错误是因为您确实将handleCashInput作为prop传递给CashItemsList

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

另外，将数组与reduce一起使用也不是一个好主意，因为如果删除一个金额然后重新输入，则总数将是错误的。 我做了以下事情来解决它：

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