[英]calculate quantity multiply unit price input and equal input will be subtotal and sum all subtotals
[英]How to calculate each item amount using rate and quantity and then sum up all the items to calculate subTotal
在这里,在这张图片中,我有 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}
]
提前致谢!!
当您在行的末尾显示价格时,为该字段提供一个类。
之后,只需获取该类的值并将它们添加到onChange
函数中并在最后显示。
让我知道它是怎么回事或任何人有更好的主意。
我有两个选择
初始状态:
const state = {
items: [],
subtotal: 0,
}
//...
switch(type) {
case ADD_ITEM:{
return {
...state,
items: [...state.items, payload],
subtotal: state.subtotal + (payload.rate * payload.quantity)
}
}
}
在 UI 中呈现subtotal
,它随着项目的变化而变化
我正在使用reduce()
//..
render() {
const subtotal = items.reduce((total, item) => total + item.rate * item.quantity, 0);
return() {
//Items
<p>Subtotal: {subtotal}<p>
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.