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

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

---

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

---

內容

若仔細觀察各大 UI 框架，對於 <input> 欄位的客製化需求五花八門。在對外暴露的介面上常見如下：

1. value：預設輸入框內容，此值是可以被 React State 所控制的，且必須搭配 onChange 方法，否則會報錯
2. defaultValue：寫入原生的 <input> 內的 value。若你使用這個值，那就必須搭配 useRef() 來取得
3. prefix：輸入框前面的圖示，像是一個 “$” 符號來提醒使用者這邊是輸入金額
4. suffix：輸入框後方的圖示
5. placeholder
6. isDisabled
7. isError
8. onChange：當輸入框的內容有改變時，所觸發的 callback

---

程式碼

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

---

相關文章

按讚加入粉絲團

延伸閱讀

• [筆記] 程式必修課！離散數學與演算法 – 142
• [筆記] 程式必修課！離散數學與演算法 – 141
• [筆記] 程式必修課！離散數學與演算法 – 140
• [筆記] 程式必修課！離散數學與演算法 – 138
• [筆記] Nuxt2 + Buefy0.X + Axios 升級至 Nuxt4 + Buefy1.X + ofetch