[筆記] 哎呀！不小心刻了一套 React UI 元件庫 8 – Rate

近期為了熟悉元件 Component 的客製化，便參照「哎呀！不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Rate。

---

[ Repo ]：https://github.com/andy922200/practice-storybook-react

---

內容

為了要做出「預覽」和「實際點選」的數量效果，會需要兩個 useState。前者是透過 onMouseOver 和 onMouseLeave 來控制。 onMouseOver 會滑至半顆或是一顆的區域，點下時觸發 onClick 把值寫入「實際點選」 onMouseLeave 則是傳入先前儲存的「實際點選」值

參數

1. count – 預設 5 顆
2. allowHalf – 允許半顆
   1. 兩個 div，一個是 active 的圖案，另一個是 inactive 的圖案
   2. 第一個 div 是 width: 50%；超過的用 overflow: hidden 隱藏
   3. 當有 hover 在半顆的區域時，就把顏色轉換成 active 的狀態
   4. 如果 allowHalf 為 false，那第一個 div 就隱藏
3. disabled
4. character – 可以傳入不同的圖案，如星星、愛心…等

---

程式碼

https://github.com/andy922200/practice-storybook-react/commit/d11eb19beedeb541ff7fe7b5f3138040af923d68

---

相關文章

按讚加入粉絲團

延伸閱讀

• [筆記] TypeScript 之 enum 生成其所有 value 的集合
• [筆記] 程式必修課！離散數學與演算法 – 142
• [筆記] 程式必修課！離散數學與演算法 – 141
• [筆記] 程式必修課！離散數學與演算法 – 140
• [筆記] 程式必修課！離散數學與演算法 – 138