React之购物车 - 技术栈

购物车是电商网站一个重要功能，此文使用React组件方式设计购物车组件，可根据状态变量showCart 灵活切换显示和隐藏购物车，当购物车商品为空时，显示空购物车，如下所示：

否则显示商品信息，并计算各商品总价和购物车各商品总价和，如下所示：

一、设计思路

1、购物车设计

整体上设计为两个组件，一个空购物车组件EmptyCart, 主要功能是显示购物车图片和提示信息"购物车为空，快去添加商品吧"。另一外为购物车组件Cart ,,主要负责不为空时购物车显示和处理逻辑，此购物车有惟下几个属性：

selectProducts : 所选商品信息

qty：所选商吕数量

pModel：所有商品

购物车内置事件

handleClick()：购物车显示与隐藏切换。

handleRemove(product,index) ：删除购物车商吕

内置状态

showCart: false ：显示隐藏开关，默认为false,隐藏购物车。

处理逻辑:

先计算总价，再形成动态的cartItems,最后 ,当（showCart && len)不为0 时，显示购物车，其它状况或不显示，或显示空购物车。

2、父组件调用和数据格式

父组件调用

<Cart

handleRemove={this.handleRemove}

selectProducts={this.state.selectProducts}

qty={this.state.selectQty}

pModel={this.state.products}

数据格式示例：

商品product数据格式

javascript 复制代码

  {
                index: 0,
                path: '../public/apple.jpg',
                name: "Apple",
                price: 4.99,
                quantity: 10
            },

商品库存quantity数据格式示

javascript 复制代码

  //商品库存 
  export const allQuantity = [10,8,15,5,9,20]
  //加入购物车的商品数量
  export const selectQuantity = [0,0,0,0,0,0]

加入购物车操作即用selectProudcts商品数组push操作增加商品，同时修改selectQty（以商品的index为索引）相应元素的值。

二、代码实现

空购物车组件EmptyCart代码如下所示：

javascript 复制代码

import React from 'react'
import { Card,} from 'antd'

function  EmptyCart() {
    return(
        <Card
        style={{width: 400}}
        >
        <h3>您的购物车还是空的，快去添加商品吧</h3>
        </Card>
    )
}

export default EmptyCart;

购物车组件Cart代码如下所示：

javascript 复制代码

import React,{ Component } from 'react'
//引入antd布局和按钮组件
import { Row,Card, Button } from 'antd';
import EmptyCart from './EmptyCart'

class Cart extends Component {
  constructor(props) {
    super(props)
    this.state = {
       showCart: false
    }
    this.handleClick = this.handleClick.bind(this)
    this.handleRemove = this.handleRemove.bind(this)
  }
  //单击事件
  handleClick() {
    this.setState({showCart: ! this.state.showCart })
  }
  //移除事件
  handleRemove(product,index) {
    this.props.handleRemove(product,index);
    setTimeout(() => {
      this.setState({ showCart: ! this.state.showCart}) 
    },100)
    setTimeout(() => {
      this.setState({ showCart: ! this.state.showCart}) 
    },200)
  }

  render() {

    const { showCart }=this.state;
    const { selectProducts,qty,pModel }=this.props;
    let cartItems;
    const len=selectProducts.length;
    let totalPrice=0;

    for(let i=0;i<qty.length;i++){
      totalPrice+=pModel[i].price*qty[i];
    }

    if(len!==0){
        cartItems=qty.map((product,index)=>{
             if(product===0) return null;
             return (
               <Card key={pModel[index].name}>
                <Row type="flex">
                    <img 
                      style={{cursor: 'pointer',width:300,height: 250}}
                      src={pModel[index].path}
                     />
                     <div style={{marginLeft: 10}}>
                      <p>标题： {pModel[index].name}</p>
                      <p>价格： {pModel[index].price}</p>
                      <p>数量: {product}</p>
                      <p>共计：{product*pModel[index].price}</p>
                      
                      <Button
                        style={{margin: 10}}
                        onClick={()=>this.handleRemove(product,index)}
                      >删除</Button>
                     </div>
                </Row>
               </Card>
             )
        })
    }
    return (
      <Card style={{padding: '100px 50px 10px'}}>
        <Row>
          { showCart && len===0 ? <EmptyCart /> : null }
          { showCart && len!==0 ?  <div>
            <h3>共计： {totalPrice} 元</h3>
            <div>{cartItems}</div>
          </div> : null  }
        </Row>
        <Row>
        <Button
           id='popbtn'
           type='primary'
           className='btn btn-success'
           onClick={()=>this.handleClick()}
        >我的购物车</Button>
        </Row>       
      </Card>
    )
  }
}


export default Cart

此文讲述了使用React 框架的组件概念设计购物车的主要思路和代码实现，还显得比较幼稚，希望对您有所助益。