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.实现处理购买功能:
因为这是简单的模拟购物车,所以这功能只是判断有没有选中商品而已,有选择的话则购买成功.
思路是这样的,判断是否有商品选中,提示购买结果
效果如下: