資訊專欄INFORMATION COLUMN
摘要：剛剛開始接觸于是做了一個簡單的購物車練練手先上一下效果圖在做這個購物車前先分析好購物車的結(jié)構(gòu)該怎么分割組件怎么組合組件組件里用具備那些功能組件間應(yīng)該怎么通信等以下為實現(xiàn)步驟第一步先畫圖分割組件如上圖結(jié)構(gòu)所示把購物車分隔為這三個組件代表購物車
剛剛開始接觸React,于是做了一個簡單的購物車練練手
先上一下效果圖:
在做這個購物車前,先分析好購物車的結(jié)構(gòu),該怎么分割組件,怎么組合組件,組件里用具備那些功能,組件間應(yīng)該怎么通信等.
以下為實現(xiàn)步驟:
如上圖結(jié)構(gòu)所示,把購物車分隔為ShopCar,ShopRow,TotalBlock這三個組件,
ShopCar 代表購物車表格,也就是購物車內(nèi)容的總和
ShopRow 代表購物車?yán)锏拿恳豁椛唐返男畔?/strong>
TotalBlock 代表購物車總價
有了這三個組件,接著就確認(rèn)三個組件的關(guān)系:
可以開出,ShopCar包含ShopRow和TotalBlock,也就是我們應(yīng)該把ShopRow和TotalBlock的狀態(tài)提升到ShopCar,這兩個組件所需要的信息由ShopCar來提供
第二步,分析各組件的結(jié)構(gòu)以及所需要的屬性和功能1.先分析ShopRow(每一項商品的信息)
ShopRow是一個表格行,其中每一列的分別包含[商品圖片,商品名稱],商品數(shù)量,商品單價,商品總價,選中狀態(tài)
于是得到以下結(jié)構(gòu)
接著分析ShopRow所需的屬性和功能
ShopRow的圖片,名稱,等信息由ShopCar里的商品信息數(shù)組提供,于是得出以下屬性和行為:
1. img: 商品圖片
2. name: 商品名稱
3. count: 商品數(shù)量
4. price: 商品單價
5. totalPrice: 商品總價
6. isChecked: 商品選中狀態(tài)
7. handleCheck: 改變商品選中狀態(tài)的行為
8. handleCountChange: 改變商品數(shù)量的行為
ShopRow代碼實現(xiàn):
2.分析TotalBlock(商品總價)
TotalBlock很簡單,只需要一個商品總價信息就可以了
于是得到以下結(jié)構(gòu):
接著分析TotalBlock所需的屬性
TotalBlock的總價信息由ShopCar的總價狀態(tài)提供,于是得出以下屬性:
1. totalPrice: 商品總價
TotalBlock代碼實現(xiàn):
3.分析ShopCar(購物車)
由于ShopCar是ShopRow和TotalBlock的集合,因此需要給這兩個組件提供信息,于是需要有商品信息數(shù)組狀態(tài),全選狀態(tài),總價狀態(tài)還有其他的功能
于是先得出以下結(jié)構(gòu)
接著分析ShopCar里的狀態(tài),屬性和功能:
ShopCar為ShopRow和TotalBlock提供商品的信息,于是得到以下狀態(tài)和功能:
狀態(tài):
1. shopCarList: this.props.shopCarList //獲取商品信息
2. isCheckedAll: false //全選狀態(tài),默認(rèn)為false
3. totalPrice: 0 //商品總價狀態(tài),默認(rèn)為0
功能:
1. handleCheckAll: 處理全選
2. handleCheck: 處理每一項商品的選中狀態(tài)
3. handleCountChange: 處理每一項商品的數(shù)量改變
4. handleTotalPrice: 處理總價計算
5. handleHaveCheck: 判斷是否有商品選中
6. handleRemove: 處理商品移除
7. handleBuy: 處理購買
商品信息數(shù)組:
1.寫入狀態(tài):
可以看到商品信息狀態(tài)已經(jīng)存入了商品信息啦
2.先渲染商品列表:
3.實現(xiàn)處理總價計算:
思路是這樣的, 遍歷商品信息狀態(tài),當(dāng)有商品選中時計算總價并返回總價
4.實現(xiàn)處理全選功能:
思路是這樣的,點擊全選時改變?nèi)x狀態(tài),接著改變每一項商品的選中狀態(tài),同時更新總價狀態(tài)
效果如下:
5.實現(xiàn)處理商品選中功能:
思路是這樣的,選中商品時,更新選中對應(yīng)項的選中狀態(tài),更新商品信息狀態(tài),接著讀取每一項商品的選中狀態(tài),如果每一項都選中則全選狀態(tài)為true,反之亦然.最后根據(jù)選中項,更新總價狀態(tài)
效果如下:
5.實現(xiàn)處理商品數(shù)量改變的功能:
思路是這樣的,根據(jù)選中項改變對應(yīng)的商品數(shù)量,以及總價.更新商品信息狀態(tài),更新購物車的總價狀態(tài)
效果如下:
6.實現(xiàn)處理判斷是否有選中商品的功能:
這個功能用于當(dāng)沒選中商品時,無法刪除和購買.
思路是這樣的,讀取每一項商品的選中狀態(tài),當(dāng)其中至少有一項為選中時返回true,反之返回false
7.實現(xiàn)處理商品移除的功能:
思路是這樣的,判斷是否有商品選中,沒有選中時無法刪除.有選中的商品時,過濾掉選中狀態(tài)為true的商品.更新商品信息狀態(tài)和購物車總價狀態(tài).
效果如下:
8.實現(xiàn)處理購買功能:
因為這是簡單的模擬購物車,所以這功能只是判斷有沒有選中商品而已,有選擇的話則購買成功.
思路是這樣的,判斷是否有商品選中,提示購買結(jié)果
效果如下:
以下是完整代碼:文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103109.html
摘要：面向?qū)ο笕筇卣骼^承性多態(tài)性封裝性接口。第五階段封裝一個屬于自己的框架框架封裝基礎(chǔ)事件流冒泡捕獲事件對象事件框架選擇框架。核心模塊和對象全局對象，，，事件驅(qū)動，事件發(fā)射器加密解密，路徑操作，序列化和反序列化文件流操作服務(wù)端與客戶端。 第一階段： HTML+CSS:HTML進階、CSS進階、div+css布局、HTML+css整站開發(fā)、 JavaScript基礎(chǔ)：Js基礎(chǔ)教程、js內(nèi)置對...
摘要：面向?qū)ο笕筇卣骼^承性多態(tài)性封裝性接口。第五階段封裝一個屬于自己的框架框架封裝基礎(chǔ)事件流冒泡捕獲事件對象事件框架選擇框架。核心模塊和對象全局對象，，，事件驅(qū)動，事件發(fā)射器加密解密，路徑操作，序列化和反序列化文件流操作服務(wù)端與客戶端。 第一階段： HTML+CSS:HTML進階、CSS進階、div+css布局、HTML+css整站開發(fā)、 JavaScript基礎(chǔ)：Js基礎(chǔ)教程、js內(nèi)置對...
摘要：若后者存在于前者的子組件中，那么無論后者處于前者子組件的哪個位置，前者可以向后者直接提供數(shù)據(jù)。每一個商品都有一個用于顯示購物車中該件商品的數(shù)量，同時還有一個按鈕用來執(zhí)行存在于中的回調(diào)函數(shù)。這就意味著會隨著的改變而改變，也會隨之收到一個新的。 showImg(https://segmentfault.com/img/bVbceuR?w=2000&h=1256); 文章翻譯自Seth Co...
閱讀 2332·2021-11-23 09:51
閱讀 3764·2021-11-11 10:57
閱讀 1410·2021-10-09 09:43
閱讀 2498·2021-09-29 09:35
閱讀 2028·2019-08-30 15:54
閱讀 1798·2019-08-30 15:44
閱讀 3194·2019-08-30 13:20
閱讀 1702·2019-08-30 11:19
