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