Question

我正在尝试使用reactjs创建一个购物车，到目前为止，这是我的代码...

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: 0,
      };
      this.sum = this.sum.bind(this);
    }

    sum(){

    }
   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;

如您所见，我通过一个数组映射并创建了商店商品，我想创建一个像这样的购物车：当用户单击“添加项目”按钮时，项目的名称和编号将添加到帐单中，并显示价格总和以及总更新和总更新。如果您现在有任何可以帮助我创建购物车的教程，那么我现在就很复杂了，请立即让我接受，谢谢您。

如何在reactjs中创建购物车？

0 个答案: