[筆記] 哎呀!不小心刻了一套 React UI 元件庫 4 – Checkbox

此篇接續上篇 [筆記] 哎呀!不小心刻了一套 React UI 元件庫 3 – Radio,來刻 Checkbox。

react logo


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


內容

Checkbox 跟 Radio 的行為相似,但 Radio 多以圓形表示單選,而 Checkbox 則是方框表示多選。

不過 Checkbox 若要做到 Group 的效果,無需額外製作一個 CheckboxGroup,可簡單的利用 Array 的 map 方法來達成顯示,並自行撰寫一個 onClick 方法來寫入值即可。


程式碼

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


相關文章

★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 10 – Chip/Tag
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 10 – Chip/Tag
在製作 Chip ( 也可稱為 Tag ) 的過程中,關於標籤 Label 的傳入,我想保留 children 或是 label 參數都可以。另外當 isDisabled 是 true 的時候,樣式會變化且不會觸發刪除函式[ Repo ]:https://github.com/andy922200/
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 9 – Upload
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 9 – Upload
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Upload。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容原生的 html 元件 <inp
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 8 – Rate
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 8 – Rate
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Rate。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容為了要做出「預覽」和
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 7 – Slider
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 7 – Slider
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Slider。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容Slider 上頭的拖拉圓形
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 6 – Form Control
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 6 – Form Control
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Form Control 這個表格顯示常見的共用樣式的重點。[ Repo ]:https://github.com/andy922200/prac
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 5 – Input
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 5 – Input
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下純輸入元件 Input 的重點。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容若
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 3 – Radio
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 3 – Radio
Radio 和 Checkbox 的選項部分是類似的,差別在於前者需要有群組處理單選,後者每一個都可以是獨立狀態。此篇先由 Radio 和 RadioGroup 開始。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容Option
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 2 – Switch
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 2 – Switch
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Switch 開關元件的重點。[ Repo ]:https://github.com/andy922200/practice-storybook-reactSwitch 元件
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 1 – 開發環境和 Button
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 1 – 開發環境和 Button
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Button 按鈕元件的重點,並筆記下開發環境架設所需。開發環境 書中原先是採用 js
按讚加入粉絲團

延伸閱讀