React 制做简单的购物车

刚刚开始接触React,因而作了一个简单的购物车练练手
先上一下效果图:

在作这个购物车前,先分析好购物车的结构,该怎么分割组件,怎么组合组件,组件里用具有那些功能,组件间应该怎么通讯等.
如下为实现步骤:

第一步,先画图,分割组件

如上图结构所示,把购物车分隔为ShopCar,ShopRow,TotalBlock这三个组件,
ShopCar 表明购物车表格,也就是购物车内容的总和
ShopRow 表明购物车里的每一项商品的信息
TotalBlock 表明购物车总价

有了这三个组件,接着就确认三个组件的关系:

能够开出,ShopCar包含ShopRow和TotalBlock,也就是咱们应该把ShopRow和TotalBlock的状态提高到ShopCar,这两个组件所须要的信息由ShopCar来提供

第二步,分析各组件的结构以及所须要的属性和功能

1.先分析ShopRow(每一项商品的信息)
ShopRow是一个表格行,其中每一列的分别包含[商品图片,商品名称],商品数量,商品单价,商品总价,选中状态
因而获得如下结构

接着分析ShopRow所需的属性和功能
ShopRow的图片,名称,等信息由ShopCar里的商品信息数组提供,因而得出如下属性和行为:
1. img: 商品图片
2. name: 商品名称
3. count: 商品数量
4. price: 商品单价
5. totalPrice: 商品总价
6. isChecked: 商品选中状态
7. handleCheck: 改变商品选中状态的行为
8. handleCountChange: 改变商品数量的行为

ShopRow代码实现:

---

2.分析TotalBlock(商品总价)
TotalBlock很简单,只须要一个商品总价信息就能够了
因而获得如下结构:

接着分析TotalBlock所需的属性
TotalBlock的总价信息由ShopCar的总价状态提供,因而得出如下属性:
1. totalPrice: 商品总价

TotalBlock代码实现:

3.分析ShopCar(购物车)
因为ShopCar是ShopRow和TotalBlock的集合,所以须要给这两个组件提供信息,因而须要有商品信息数组状态,全选状态,总价状态还有其余的功能
因而先得出如下结构

接着分析ShopCar里的状态,属性和功能:
ShopCar为ShopRow和TotalBlock提供商品的信息,因而获得如下状态和功能:

状态:
1. shopCarList: this.props.shopCarList //获取商品信息
2. isCheckedAll: false //全选状态,默认为false
3. totalPrice: 0 //商品总价状态,默认为0

功能:
1. handleCheckAll: 处理全选
2. handleCheck: 处理每一项商品的选中状态
3. handleCountChange: 处理每一项商品的数量改变
4. handleTotalPrice: 处理总价计算
5. handleHaveCheck: 判断是否有商品选中
6. handleRemove: 处理商品移除
7. handleBuy: 处理购买

第三步,实现ShopCar里的功能

商品信息数组:

1.写入状态:

能够看到商品信息状态已经存入了商品信息啦

2.先渲染商品列表:

3.实现处理总价计算:
思路是这样的, 遍历商品信息状态,当有商品选中时计算总价并返回总价

---

4.实现处理全选功能:
思路是这样的,点击全选时改变全选状态,接着改变每一项商品的选中状态,同时更新总价状态

效果以下:

5.实现处理商品选中功能:
思路是这样的,选中商品时,更新选中对应项的选中状态,更新商品信息状态,接着读取每一项商品的选中状态,若是每一项都选中则全选状态为true,反之亦然.最后根据选中项,更新总价状态

效果以下:

5.实现处理商品数量改变的功能:
思路是这样的,根据选中项改变对应的商品数量,以及总价.更新商品信息状态,更新购物车的总价状态

效果以下:

6.实现处理判断是否有选中商品的功能:
这个功能用于当没选中商品时,没法删除和购买.
思路是这样的,读取每一项商品的选中状态,当其中至少有一项为选中时返回true,反之返回false

7.实现处理商品移除的功能:
思路是这样的,判断是否有商品选中,没有选中时没法删除.有选中的商品时,过滤掉选中状态为true的商品.更新商品信息状态和购物车总价状态.

效果以下:

8.实现处理购买功能:
由于这是简单的模拟购物车,因此这功能只是判断有没有选中商品而已,有选择的话则购买成功.
思路是这样的,判断是否有商品选中,提示购买结果

效果以下:

如下是完整代码: