1
Ich habe eine Reaktionskomponente aus einem JSON-Array, die einen Eingang enthält, der es einem Benutzer ermöglicht, die Menge eines Produkts auszuwählen. Mein aktuelles Problem ist, dass ich eine Möglichkeit brauche, alle Produktpreise nach ihrer Menge zu multiplizieren und sie in eine Summe auszugeben. Ich habe es geschafft, dies für jede Komponente zu erreichen, aber ich brauche wirklich eine laufende Summe, die aktualisiert, wenn die Menge geändert wird. Die Schwierigkeit hierbei ist, dass einige Werte im Array nicht berücksichtigt werden, da sie nicht als Peripheriegeräte klassifiziert werden.Summe der Array-Werte multipliziert mit Eingabewert in der react-Komponente
Ich bin ziemlich neu zu reagieren, ich hoffe, dass jemand eine Lösung vorschlagen kann. Jeder Rat würde sehr geschätzt werden.
Mein Code, wie es steht unter
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;
Dieser Code auch in einer Formel, die aus einem separaten Bauteil zieht
var productSort = productdata.data.products;
productSort.sort(function(a, b){return a.id - b.id});
Ein Beispiel für meine Json Werte sind wie folgt
{
"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",
}
}]
}
}