在 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

Interface / API

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

元件實作

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