30DaysChallenge 是自主性每兩天寫一篇技術相關的部落格

React

被控制的表單 Controlled Components(Form)

初學 React 時，被所謂的 controlled 表單跌了一個大坑

過去用基本的三大招時，我們可以透過選取 DOM 節點的方式，抓到表單資料

React 比較特別，在框架中我們就不會直接的接觸到 DOM

要做啥要幹啥，都交給 React

假設你想編輯你的支出，某一筆 56 元的支出

<input value="56">

<input value={state}>

結果發現沒辦直接在欄位上修改，這是因為表單被控制了

value屬性一但設置了之後，就會交給 React 去管理

如果想要更改，就要透過 React

我們可以在上面設置監聽器，這樣就能即時性的輸入即變更了

好搞剛

const [state, setState] = useState(56)

const typeHandler = (e) => {
  setState(+e.target.value)
}

<input type="number" value={state} onChange={typeHandler}>

---

不被控制的…表單? Uncontrolled components

不被控制的元件(表單)的原生資料是由 DOM 處理

換句話說，也是有辦法抓到最純的 DOM

但只適合抓，極度建議只能拿來READ，而不是MODIFY

我們可以透過 useRef 這個 Hook 來實作

• 引入之後，先宣告賦值於一個變數
• 綁定特定元件(元素)
• 透過監聽來讀取(XXX.current.value)

const money = useRef()

const getValueHandler = () => {
  console.log(money.current.value)
}

<form onSubmit={getValueHandler}>
  <input type="number" ref={money}>
</form>

Submit 後，就可以抓到剛剛輸入的數值囉!

若想要預設值怎麼辦?

我們可以使用defaultValue/defaultChecked來達成目的喔!

---

比對兩者?

控制與非控制該怎麼選擇呢?

大部分情況都是選擇控制 useState 的方式來操作表單，包含即時性的驗證、資料修改、依照內容修改其他相關的動態行為等等等…

但你也可以使用非控制的方法，等待使用者按下送出後，透過 ref 來讀取資料，再進一步驗證，但不要嘗試去控制 DOM，也不要發生任何 sideEffect，Ref 可單純用來讀取資料就好。

---

08/21，以上有誤再請告知指正>_<