React 制作简单的购物车

Travis 发布于2019-08-23 16:31 / 2434人阅读

摘要：刚刚开始接触于是做了一个简单的购物车练练手先上一下效果图在做这个购物车前先分析好购物车的结构该怎么分割组件怎么组合组件组件里用具备那些功能组件间应该怎么通信等以下为实现步骤第一步先画图分割组件如上图结构所示把购物车分隔为这三个组件代表购物车

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

效果如下:

以下是完整代码:

云服务器 GPU云服务器简单的php购物源码简单的表格制作视频简单的视频制作软件 php制作的简单网页

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103109.html

大前端2018现在上车还还得及么

摘要：面向对象三大特征继承性多态性封装性接口。第五阶段封装一个属于自己的框架框架封装基础事件流冒泡捕获事件对象事件框架选择框架。核心模块和对象全局对象，，，事件驱动，事件发射器加密解密，路径操作，序列化和反序列化文件流操作服务端与客户端。第一阶段： HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础：Js基础教程、js内置对...

stormgens 2019-08-01 18:25 评论0 收藏0
大前端2018现在上车还还得及么

摘要：面向对象三大特征继承性多态性封装性接口。第五阶段封装一个属于自己的框架框架封装基础事件流冒泡捕获事件对象事件框架选择框架。核心模块和对象全局对象，，，事件驱动，事件发射器加密解密，路径操作，序列化和反序列化文件流操作服务端与客户端。第一阶段： HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础：Js基础教程、js内置对...

mylxsw 2019-08-22 13:49 评论0 收藏0
React Context API一览

摘要：若后者存在于前者的子组件中，那么无论后者处于前者子组件的哪个位置，前者可以向后者直接提供数据。每一个商品都有一个用于显示购物车中该件商品的数量，同时还有一个按钮用来执行存在于中的回调函数。这就意味着会随着的改变而改变，也会随之收到一个新的。 showImg(https://segmentfault.com/img/bVbceuR?w=2000&h=1256); 文章翻译自Seth Co...

Cruise_Chan 2019-08-22 18:07 评论0 收藏0
4月份前端资源分享

摘要：更多资源请文章转自月份前端资源分享关于的思考一款有趣的动画效果跨站资源共享之二最流行的编程语言能做什么到底什么是闭包的第三个参数跨域资源共享详解阮一峰前端要给力之语句在中的值周爱民中国第二届视频花絮编码规范前端工程师手册奇舞周刊被忽视的更多资源请Star：https://github.com/maidishike... 文章转自：https://github.com/jsfron...

jsdt 2019-08-20 15:54 评论0 收藏0