我从JSON数组中提取了一个react组件，其中包含一个允许用户选择产品数量的输入。我目前的问题是，我需要一种方法将所有产品价格乘以其数量并将其输出为总数。我已经设法为每个组件实现了这一点，但我确实需要一个在更改数量时更新的运行总计。这里的困难是数组中的某些值不会被包括在内，因为它们可能不被归类为外围设备。
反应相当新，我希望有人能提出解决方案。任何建议都将不胜感激。
我的代码现在位于
之下 import React, { Component } from "react";
import "./App.css";
import productdata from "./catalog.json";
import productSort from "./OrderDetails";
class App extends Component {
constructor(props) {
super(props);
this.state = {
BundleVal: "",
ProductCounter: [],
TotalCounter: [],
PeripheralCounter: 0,
PriceCounter: 0
};
}
updateBundle = val => {
this.setState({
BundleVal: val
});
};
updateQuantity = e => {
var pCounter = this.state.ProductCounter;
var el = parseInt(e.target.id.split("_")[1], 10);
pCounter[el] = parseInt(e.target.value, 10);
this.setState({ ProductCounter: pCounter });
};
render() {
const BundleProducts = [].concat(productSort).map((item, i) =>
<div key={item.id}>
{item.id} <br />
{item.name} <br />
{item.description} <br />
Installation: {item.price.installation} <br />
Monthly: {item.price.recurring} <br />
<input
type="number"
onChange={this.updateQuantity}
value={this.state.ProductCounter[item.id] || 0}
id={"product_" + item.id}
/>
<br />
{this.state.ProductCounter[item.id] || 0}<br />
Installation Total: £{parseFloat(this.state.ProductCounter[item.id] * item.price.installation, 10).toFixed(2)}
<br />
Monthly Total: £{parseFloat(this.state.ProductCounter[item.id] * item.price.recurring, 10).toFixed(2)}
<br />
<hr />
</div>
);
this.state.PeripheralCounter = this.state.ProductCounter
.filter(function(qty, pid) {
pid = String(pid);
for (var i = 0; i < productSort.length; i++) {
var p = productSort[i];
if (p.isPeripheral === true && p.id === pid) {
return true;
}
}
return false;
})
.reduce(function(count, carry) {
return count + carry;
}, 0);
let bname = null;
let maxperipherals = null;
if (this.state.BundleVal === "1") {
bname = productdata.data.bundles[0].name;
maxperipherals = productdata.data.bundles[0].maximumPeripherals;
} else if (this.state.BundleVal === "2") {
bname = productdata.data.bundles[1].name;
maxperipherals = productdata.data.bundles[1].maximumPeripherals;
} else if (this.state.BundleVal === "3") {
bname = productdata.data.bundles[2].name;
maxperipherals = productdata.data.bundles[2].maximumPeripherals;
} else if (this.state.BundleVal === "4") {
bname = productdata.data.bundles[3].name;
maxperipherals = productdata.data.bundles[3].maximumPeripherals;
} else {
bname = null;
}
return (
<div>
<h2>Order</h2>
Chosen Bundle: {bname}
<br />
Number of Peripherals: {this.state.PeripheralCounter}
<br />
Maximum Number of Peripherals: {maxperipherals}
<br />
Peripherals Installation Total: {}
<br />
<Bundle updateBundle={this.updateBundle} />
<h3>Products</h3>
{BundleProducts}
</div>
);
}
}
class Bundle extends React.Component {
constructor(props) {
super(props);
this.state = {
BundleVal: ""
};
}
updatebundle = e => {
this.props.updateBundle(e.target.value);
this.setState({ BundleVal: e.target.value });
};
render() {
return (
<div>
<h4>Bundle</h4>
<input
type="radio"
value="1"
onChange={this.updatebundle}
checked={this.state.BundleVal === "1"}
/>
{" "}Indoor Camera RAPID
<input
type="radio"
value="2"
onChange={this.updatebundle}
checked={this.state.BundleVal === "2"}
/>
{" "}Alarm Only RAPID
<input
type="radio"
value="3"
onChange={this.updatebundle}
checked={this.state.BundleVal === "3"}
/>
{" "}Outdoor Camera RAPID
<input
type="radio"
value="4"
onChange={this.updatebundle}
checked={this.state.BundleVal === "4"}
/>
{" "}Build Your Own Bundle
</div>
);
}
}
class Product extends React.Component {
constructor(props) {
super(props);
this.state = {
ProductVal: ""
};
}
updateproduct = e => {
this.props.updateProduct(e.target.value);
this.setState({ ProductVal: e.target.value });
};
render() {
return (
<div>
<h4>Product</h4>
<br />
<input type="number" onChange={this.updateproduct} />
</div>
);
}
}
export default App;
此代码还从单独的组件中提取公式
var productSort = productdata.data.products;
productSort.sort(function(a, b){return a.id - b.id});
我的Json值的示例如下
{
"timestamp": 1502121471,
"data": {
"adverts": [],
"bundles": [{
"id": "1",
"name": "Bundle 1",
"description": "Bundle 1 Description",
"maximumPeripherals": 32,
"available": true,
"count": 0,
"price": {
"installation": "99.99",
"recurring": "23.99"
},
"image": {
"file": "bundle-one.png",
},
"products": ["1", "2", "3"]
}, {
"id": "2",
"name": "Bundle 2",
"description": "Bundle 2 Description",
"maximumPeripherals": 32,
"available": true,
"count": 0,
"price": {
"installation": "99.99",
"recurring": "23.99"
},
"image": {
"file": "bundle-two.png",
},
"products": ["1", "2", "2", "2", "2"]
}],
"products": [{
"id": "1",
"name": "Product 1",
"description": "Product 1 Description",
"maximumQuantity": 1,
"isPeripheral": false,
"isAvailable": true,
"price": {
"upfront": null,
"installation": "0.00",
"recurring": "0.00"
},
"image": {
"file": "product-one.png",
}
}, {
"id": "2",
"name": "Product 2",
"description": "Product 2 Description",
"maximumQuantity": null,
"isPeripheral": true,
"isAvailable": true,
"count": 0,
"price": {
"upfront": "60.00",
"installation": "9.60",
"recurring": "1.25"
},
"image": {
"file": "product-two.png",
}
}, {
"id": "3",
"name": "Product Three",
"description": "Product Three Description",
"maximumQuantity": null,
"isPeripheral": true,
"isAvailable": true,
"count": 0,
"price": {
"upfront": "132.00",
"installation": "9.60",
"recurring": "2.75"
},
"image": {
"file": "product-three.png",
}
}]
}
}
答案 0 :(得分：0)
花了一些时间，但我有一个答案。本质上它是一个for循环，迭代BundleProducts创建的数组，并将道具中的子项乘以包括安装成本和数量输入（分别为10和19）。如果有人有更好的解决方案，请随时发布。
var myTotal = 0;
for(var i = 0, len = BundleProducts.length; i < len; i++) {
myTotal += BundleProducts[i].props.children[19] * BundleProducts[i].props.children[10];
}