iT邦幫忙

2021 iThome 鐵人賽

DAY 25
0
Modern Web

關於 UI 元件你所該知道的事系列 第 25

Day 25 - 實戰演練 — Input

https://ithelp.ithome.com.tw/upload/images/20211010/20120754JuOp8tlWN3.png

在 Input 需要預處理的主要就是 React 的 control & unControl,於是也在這簡介一下兩者的差別:

Uncontrolled component:由 HTML form element 自行管理 state ( ref )

使用方式:用 ref 去取值

使用情境:

  1. 跟非 React 的程式碼整合時
  2. 處理特殊 form element 時,如 file input
  3. 不需要取用 form 的 state 時

Controlled component:由 React 管控 HTML form element 的 state ( useState )

使用方式:用 useState 去手動操作值

使用情境:

當要取用 form 的輸入內容時,就應該使用 controlled component

  1. Single Source of Truth
  2. 需要對 form 檢查是否修改過(dirty)、格式驗證(validation)...etc 等狀況時
  3. 需要取得 form 的 state 或內容去連動修改其他 component 時

可以這樣理解:手動控制的就是 control ,而自動包含功能的就是 control

  • 我們封包好的 UI Componen 對使用者來說也可以是 Uncontrolled
  • 直到他自己綁上 useState 才變成 controlled
// Controlled:
<input type="text" value={value} onChange={handleChange} />

// Uncontrolled:
<input type="text" defaultValue="foo" ref={inputRef} />
// Use `inputRef.current.value` to read the current value of <input>

想先看 Code 或是 Demo 的由此去

Github Repo: ithelp-ui-demo

Live Demo:** Input**

Input

https://ithelp.ithome.com.tw/upload/images/20211010/201207549dFDGwXyEf.png

Interface / API

因為封裝方式是把 Input 直接塞在 TextField 底下,所以 Day 22 提到的 TextField 的值都會有,這邊是列出除此之外的 Props。

https://ithelp.ithome.com.tw/upload/images/20211010/20120754tuo6RU0NYv.png

https://ithelp.ithome.com.tw/upload/images/20211010/20120754fqNHF2zpW8.png

元件實作

主要就是把原生 Input 包在 TextField 底下,並透過 useInputControlValue 讓它是 control 或 uncontrol 都可以的處理。

https://ithelp.ithome.com.tw/upload/images/20211010/20120754p1BwC8P83J.png

https://ithelp.ithome.com.tw/upload/images/20211010/20120754tuPfKVuSyA.png


上一篇
Day 24 - 實戰演練 — FormControl
下一篇
Day 26 - 實戰演練 — Notifier 、Notification
系列文
關於 UI 元件你所該知道的事30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言