近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Select 的實踐方法 ( 需搭配 Dropdown 的 Portal 一起使用 )。
[ Repo ]:https://github.com/andy922200/practice-storybook-react
內容
參數
options – 選項,一般而言會以 label 和 value 作為選項內容
value – 選取到的值
onSelect – 外部傳入的當選到時呼叫的方法
placeholder – 預設字樣
isDisabled – 是否禁用
isLoading – 載入中與否
概念
單選情況:Select 本身的狀態僅需要處理開關 Drawer 與否即可
多選情況:除內部記錄 Drawer 開閉外,還需要多一個陣列來記錄選了什麼,並將這個結果藉由 onSelect 的方法來傳出
程式碼
相關文章
★全文分享★ [筆記] 哎呀!不小心刻了一套 React UI 元件庫 30 – 佈署發佈
![[筆記] 哎呀!不小心刻了一套 React UI 元件庫 30 – 佈署發佈 [筆記] 哎呀!不小心刻了一套 React UI 元件庫 30 – 佈署發佈](https://smlpoints.com/wp-content/uploads/notes-react-hooks-ch1-ch2-1.jpeg)
近期為了熟悉元件 Component 的客製化,便
★全文分享★ [筆記] 哎呀!不小心刻了一套 React UI 元件庫 29 – Toast
![[筆記] 哎呀!不小心刻了一套 React UI 元件庫 29 – Toast [筆記] 哎呀!不小心刻了一套 React UI 元件庫 29 – Toast](https://smlpoints.com/wp-content/uploads/notes-react-hooks-ch1-ch2-1.jpeg)
近期為了熟悉元件 Component 的客製化,便
★全文分享★ [筆記] 哎呀!不小心刻了一套 React UI 元件庫 28 – Modal
![[筆記] 哎呀!不小心刻了一套 React UI 元件庫 28 – Modal [筆記] 哎呀!不小心刻了一套 React UI 元件庫 28 – Modal](https://smlpoints.com/wp-content/uploads/notes-react-hooks-ch1-ch2-1.jpeg)
近期為了熟悉元件 Component 的客製化,便
★全文分享★ [筆記] 哎呀!不小心刻了一套 React UI 元件庫 27 – Progress Circle
![[筆記] 哎呀!不小心刻了一套 React UI 元件庫 27 – Progress Circle [筆記] 哎呀!不小心刻了一套 React UI 元件庫 27 – Progress Circle](https://smlpoints.com/wp-content/uploads/notes-react-hooks-ch1-ch2-1.jpeg)
近期為了熟悉元件 Component 的客製化,便
★全文分享★ [筆記] 哎呀!不小心刻了一套 React UI 元件庫 26 – Progress Bar
![[筆記] 哎呀!不小心刻了一套 React UI 元件庫 26 – Progress Bar [筆記] 哎呀!不小心刻了一套 React UI 元件庫 26 – Progress Bar](https://smlpoints.com/wp-content/uploads/notes-react-hooks-ch1-ch2-1.jpeg)
近期為了熟悉元件 Component 的客製化,便
★全文分享★ [筆記] 哎呀!不小心刻了一套 React UI 元件庫 25 – Skeleton
![[筆記] 哎呀!不小心刻了一套 React UI 元件庫 25 – Skeleton [筆記] 哎呀!不小心刻了一套 React UI 元件庫 25 – Skeleton](https://smlpoints.com/wp-content/uploads/notes-react-hooks-ch1-ch2-1.jpeg)
近期為了熟悉元件 Component 的客製化,便
★全文分享★ [筆記] 哎呀!不小心刻了一套 React UI 元件庫 24 – Spin
![[筆記] 哎呀!不小心刻了一套 React UI 元件庫 24 – Spin [筆記] 哎呀!不小心刻了一套 React UI 元件庫 24 – Spin](https://smlpoints.com/wp-content/uploads/notes-react-hooks-ch1-ch2-1.jpeg)
近期為了熟悉元件 Component 的客製化,便
★全文分享★ [筆記] 哎呀!不小心刻了一套 React UI 元件庫 23 – Pagination
![[筆記] 哎呀!不小心刻了一套 React UI 元件庫 23 – Pagination [筆記] 哎呀!不小心刻了一套 React UI 元件庫 23 – Pagination](https://smlpoints.com/wp-content/uploads/notes-react-hooks-ch1-ch2-1.jpeg)
近期為了熟悉元件 Component 的客製化,便
★全文分享★ [筆記] 哎呀!不小心刻了一套 React UI 元件庫 22 – Tabs
![[筆記] 哎呀!不小心刻了一套 React UI 元件庫 22 – Tabs [筆記] 哎呀!不小心刻了一套 React UI 元件庫 22 – Tabs](https://smlpoints.com/wp-content/uploads/notes-react-hooks-ch1-ch2-1.jpeg)
近期為了熟悉元件 Component 的客製化,便
★全文分享★ [筆記] 哎呀!不小心刻了一套 React UI 元件庫 21 – Drawer
![[筆記] 哎呀!不小心刻了一套 React UI 元件庫 21 – Drawer [筆記] 哎呀!不小心刻了一套 React UI 元件庫 21 – Drawer](https://smlpoints.com/wp-content/uploads/notes-react-hooks-ch1-ch2-1.jpeg)
近期為了熟悉元件 Component 的客製化,便
