React 制作簡單的購物車

Travis 發布于2019-08-23 16:31 / 2441人閱讀

摘要：剛剛開始接觸于是做了一個簡單的購物車練練手先上一下效果圖在做這個購物車前先分析好購物車的結構該怎么分割組件怎么組合組件組件里用具備那些功能組件間應該怎么通信等以下為實現步驟第一步先畫圖分割組件如上圖結構所示把購物車分隔為這三個組件代表購物車

剛剛開始接觸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制作的簡單網頁

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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