刚刚开始接触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,反之返回false7.实现处理商品移除的功能:思路是这样的,判断是否有商品选中,没有选中时无法删除.有选中的商品时,过滤掉选中状态为true的商品.更新商品信息状态和购物车总价状态.效果如下:8.实现处理购买功能:因为这是简单的模拟购物车,所以这功能只是判断有没有选中商品而已,有选择的话则购买成功.思路是这样的,判断是否有商品选中,提示购买结果效果如下:以下是完整代码: