如何使用费率和数量来计算每个项目的数量，然后对所有项目进行汇总以计算小计

Question

items image

这里，在这张照片中，我有3个项目，分别是描述，费率，数量和数量。目前，我仅在redux中存储描述，费率和数量。金额仅用于显示。我想得到所有项目的总和。

items.map((item, index) => {
     return{

         <Input
          placeholder="Description"
          value={item && item.description}
          onChange={event => {
            setValuesToRedux(
              `items[${index}].description`,
              event.target.value
            );
          }}
        />
         <Input
          placeholder="0.00"
          value={item && item.rate}
          onChange={event => {
            setValuesToRedux(
              `items[${index}].rate`,
              event.target.value
            );
          }}
        />

         <Input
          placeholder="0"
          value={item && item.quantity}
          onChange={event => {
            setValuesToRedux(
              `items[${index}].quantity`,
              event.target.value
            );
          }}
        />
      <p>{item && item.rate && item.quanity && item.rate * item.quantity}</p>
    }
   }))

获得所有项目的费率和数量之后，我想计算小计，因为要在onChange函数上存储所有内容，所以我没有得到该怎么做的方法。

在redux中，我将项目存储为：

 items: [ {description: "item1", rate: 200, quantity: 1}, 
           {description: "item2", rate: 300, quantity: 1},
           {description: "item3", rate: 400, quantity: 1}
        ]

预先感谢！

Answer 1

当您在行尾显示价格时，请为该字段提供一个类。

之后，只需获取该类的值，然后将其添加到onChange函数中并在最后显示。

让我知道进展如何，或者有人有更好的主意。

Answer 2

我有两个选择

1。您可以在添加项目时存储小计]

初始状态：

const state = {
  items: [],
  subtotal: 0,
}

//...
switch(type) {
    case ADD_ITEM:{
      return {
        ...state,
        items: [...state.items, payload],
        subtotal: state.subtotal + (payload.rate * payload.quantity)
      }
    }
}

在用户界面中渲染subtotal，它会随着项目的变化而变化

2。否则，无论如何，您都可以从项目iteself中计算小计]

我正在使用reduce()

//..
render() {
   const subtotal = items.reduce((total, item) => total + item.rate * item.quantity, 0);
   return() {
      //Items
      <p>Subtotal: {subtotal}<p>
   }
}