将数组值的总和乘以react组件中的输入值

Question

我有一个从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",
            }
        }]
    }
}

Answer 1

花费了一些时间，但我有一个答案。 本质上，这是一个for循环，它循环访问BundleProducts创建的数组，并将props中的子项相乘，包括安装成本和数量输入（在本例中分别为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];  
}