Day04：Ant Design 表單裡會看到的勾選框(checkbox 和 radio)

2022 iThome 鐵人賽

DAY 4

自我挑戰組

那些年我用 Ant Design 做過的網頁元件系列第 4 篇

14th鐵人賽

Annie

2022-09-19 23:59:36

775 瀏覽

分享至

因為不論前後台都幾乎會使用到表單，所以我想從最簡單與好入門的勾選框來開始介紹，後續也會分享像是 input, textarea, select 和 datePicker 等等的 tag，如何在 ANTD 裡靈活運用與變化。

一、單選與多選框(checkbox)

1. 最基本的使用方式：引用與呼叫它

import { Checkbox  } from 'antd';

const App = () => (
  <div>
    <Checkbox 
      onChange={onChange}
    >
      只有一個選項
    </Checkbox>
  <div/>
);

export default App;

2. 勾選框可添加的屬性

下面列出幾項我開發最常用的，也可以點此連結去看更多官方 api 文件。

屬性名稱	可以使用的值	說明
defaultChecked	true 或 false	基本上是布林值，通常會用 state 或 props 值去控制
checked	true 或 false	除非你希望這個值不再能被變動，否則建議不要加上這個參數唷
disabled	true 或 false	使用者不能勾選的選項，可以搭配一些判斷使用
onChange	() => {}	就是 function

3. 今天的元件練習

看完上面簡單的介紹後，下面提供我的一些簡單範例，若大家有興趣也可以到線上編輯器裡玩玩看唷！


先前專案元件示意圖

二、單選框(radio)

1. 最基本的使用方式：引用與呼叫它

import { Radio  } from 'antd';

const App = () => (
  <div>
     <Radio.Group onChange={onChange} defaultChecked={1} optionType={button} >
      <Radio value={1}>apple</Radio>
      <Radio value={2}>orange</Radio>
      <Radio value={3}>banana</Radio>
      <Radio value={4}>lemon</Radio>
    </Radio.Group>
  <div/>
);

export default App;

2. 勾選框可添加的屬性

下面列出幾項我開發最常用的，也可以點此連結去看更多官方 api 文件。比較特別的是 optionType 這個屬性，我覺得它在畫面上看起來會有點像是 tab 標籤那種感覺，但其實在實務上運用它算是一種表單的某個欄位值，通常你有用到這個屬性，就會搭配 defaultChecked 這個屬性一起使用了，大家可以參考上方第1點的基本使用方式，做完會類似我下方先前專案元件示意圖的最後一個範例圖那樣。

屬性名稱	可以使用的值	說明
defaultChecked	true 或 false	基本上是布林值，通常會用 state 或 props 值去控制
optionType	default 或 button	可以呈現出勾選框或按鈕樣式(超方便的屬性)，預設是常見的圓形勾選框
disabled	true 或 false	使用者不能勾選的選項，可以搭配一些判斷使用
onChange	() => {}	就是 function