用户做出反应时如何选择购物车价格的总和？

Question

我正在尝试使用reactjs设计购物车。到目前为止，我从json中获取了数据并将其显示为购物车商品，这些数据是商品的名称，价格和摘录。

现在，我想设计一个像这样的帐单组件： 当用户单击某个项目的总价时，该项目和该用户单击的其他项目的价格以及该项目的第一次单击，将在帐单部分显示该项目的名称和总价。

到目前为止，这是我的购物车组件：

import React, { Component } from "react";
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
import { Link } from "react-router-dom";

class Food extends Component {
  constructor(props) {
    super(props);
    this.state = {
      total: [[]]
    };
  }

  render() {
    if (this.props.product !== undefined) {
      var items = this.props.product.map(index => {
        let grid = 12 / this.props.product.length;
        let menu_item_href = "/menu-item";

        return (
          <Grid item xs={grid} key={index.ProductID}>
            <Paper className="food-item">
              <div>
                <h3>{index.Name}</h3>
                <p>Excerpt: {index.Excerpt}</p>
                <p>price: {index.Price}</p>
                <div onClick={this.sum}>sum</div>
                <Link to={menu_item_href}>
                  <p>more...</p>
                </Link>
              </div>
            </Paper>
          </Grid>
        );
      });
    }
    return (
      <div>
        <h2>{this.props.cat}</h2>
        <Grid container spacing={24}>
          {items}
        </Grid>
        {this.state.total}
      </div>
    );
  }
}
export default Food;