React 製做簡單的購物車

剛剛開始接觸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.實現處理購買功能:
由於這是簡單的模擬購物車,因此這功能只是判斷有沒有選中商品而已,有選擇的話則購買成功.
思路是這樣的,判斷是否有商品選中,提示購買結果

效果以下:

如下是完整代碼: