将数组值乘以反应组件中的输入值相加

Question

我有一个从 JSON 数组中提取的反应组件，其中包含一个允许用户 select 产品数量的输入。我当前的问题是我需要一种方法将所有产品价格乘以它们的数量并将它们输出到总计中。我已经设法为每个组件实现了这一点，但我确实需要一个运行总数，该总数会在数量更改时更新。这里的困难是数组中的某些值不会被包括在内，因为它们可能不被归类为外围设备。

作为新手，我希望有人可以提出解决方案。任何建议将不胜感激。

我的代码如下

    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",
            }
        }]
    }
}

Answer 1

我想了想，但我有了答案。从本质上讲，它是一个 for 循环，它遍历 BundleProducts 创建的数组，并乘以 props 中的子项，其中包括安装成本和数量输入（在本例中分别为 10 和 19）。如果有人有更好的解决方案，请随时post。

var myTotal = 0; 
  for(var i = 0, len = BundleProducts.length; i < len; i++) {
    myTotal += BundleProducts[i].props.children[19] * BundleProducts[i].props.children[10];  
}

将数组值乘以反应组件中的输入值相加

Add up total of array values multiplied by input value in react component

javascript

arrays

json

cumulative-sum

reactjs