react-hook-form 踩坑筆記

發表於 分類於 ， Disqus：
單純整理之前踩的坑= =

前言

在後台系統最大量使用的就是form了
React裡知名度較高的就是react-hook-form與formik
原本還在猶豫該用哪一套
後來發現formik似乎進入maintain了，而react-hook-form下載量又較高
就無懸念直接使用react-hook-form

此套件算滿簡單易用，主要使用的function其實滿少的，建議快速過完一遍後再開始用
可以少踩一些坑…
比如下述幾點就是沒仔細過完官網就邊寫邊做，浪費了不少時間在試錯。殊不知官網就有答案了= =

唯獨第 1 點我在官網沒看到

重點

  1. 使用 zod 做表單驗證，無法使用自定義 validate。官網沒提到這塊，試了好久一註解zodResolver就一切正常…
  2. setError僅針對該欄位增加error，若不額外處理按鈕阻檔，當 user 按下 submit，不會觸發 error，且會清空此錯誤狀態
  3. 若要寫底層公用的欄位(如TextInput.tsx)，推薦使用getFieldState(name).invalid判斷錯誤狀態，會比errors[name]來的有用。尤其在useFieldArray使用到時，可以正確抓取錯誤，便於撰寫錯誤訊息
  4. 若欄位設定成disable，react-hook-form 會自動清掉欄位，若想保留，可以使用原生HTML的fieldset包住欄位，並將disabled設置在fieldset裡。但若是由defaultValue直接提供所有內容，不受影響。也較推薦使用此方法