2019-10-15 Formik - 如何使用Formik

[hsiaofung]

• Formik 的概念

  • Formik的props 更新會引起render嗎?
  • Formik的props和values 的關係?

• 如何安裝Formik?

• 如何設置基本的Formik?

• 如何設定表單欄位的錯誤訊息?

• Yup?

• 正則式?

• 如何設定表單欄位的初始值?及更新props重新設定初始值?

• 設定初始值的注意事項。

• 如何設定radio和checkbox?

• 如何建立具有新增，修改，刪除的表格?

• 如何監聽values的改變? 並且依據不同的values執行事件處理(如何使用handleChange)?

• 如何監聽values的改變，並且修正欄位顯示的default 值。(注意事項: 必須prevProps和nextProps不同才會re render)。

• 如何切換不同的view? 例如: 原本是下拉式選單變成input text 欄位?

• 如何將values 傳給後端?

[hsiaofung]

• Formik 無法支援，依據不同的value 觸發事件
  • 雖然使用重新reset props初始值，但是有很多地方會忽略掉，很容易產生該render 時，並沒有render。

[hsiaofung]

• Formik 可以自訂handleChange，主要的關鍵就是setFieldValue。(可以解決依據不同的value，觸發事件)
• setFieldValue 可以自己設定欄位的value。

[hsiaofung]

• 若是在某些情況，有些欄位會顯示，有些欄位不會顯示，不顯示欄位的情況，會驗證不過。
• Dynamic Form

[hsiaofung]

• touched
• errors
• isSubmitting

  <button disabled={isSubmitting}>Submit </button>

• setErrors : 當條件成立，設定錯誤。
• resetForm: 清空欄位，回到預設值，並且會清空errors。
• setSubmitting(false): 設定禁止按鈕。(需搭配isSubmitting)

[hsiaofung]

• validateSchema和validate的差異

  • 被執行的時間不同，validateSchema 的values 始終為空，可能需要在一開始就load scema，而validate的values 會隨著input 的更新，而同步更新。

• validate: 可以自定義錯誤驗證，可以驗證時而出現，時而隱藏的表格。

[hsiaofung]

• 所謂的動態表格，是指能從後端拉資料， 動態的更新欲顯示的表格。

[hsiaofung]

2019/10/25 至今的結論

• 建立基本的表格(新增)
• 驗證表格
• 動態表格(刪除)
• 替表格載入不同的初始值(編輯修改)
• 自定義onChange事件。(依照不同的value值啟動不同的事件)
• 自定義 validate驗證。(依照不同的value值顯示或隱藏某一個欄位)
• Field 更簡潔的寫法。
• resetForm