共计 1861 个字符，预计需要花费 5 分钟才能阅读完成。
刚刚开始接触 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 // 全选状态, 默认为 false3. 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. 实现处理购买功能: 因为这是简单的模拟购物车, 所以这功能只是判断有没有选中商品而已, 有选择的话则购买成功. 思路是这样的, 判断是否有商品选中, 提示购买结果
效果如下:
以下是完整代码:
