React Hook Form：使用 dirty 事件手動觸發表單的修改狀態

請注意！本文的版本資訊如下：
React v18.2.0
React Hook Form v7.45.1

前言 - Prologue

在開發表單應用程序時，了解表單欄位是否已被修改是很重要的。

這樣可以讓我們在需要時進行相應的操作，例如：顯示警告信息或確認是否保存修改。而 React Hook Form 提供了方便的 dirty 事件，使我們能夠手動觸發和追蹤表單欄位的修改狀態。

正文 - Main text

React Hook Form 是一個流行的 React 表單庫，提供了簡潔、靈活和高效的方式來處理表單驗證和狀態管理，大大簡化表單處理的開發工作。

它基於 React Hooks，讓我們能夠在不引入額外複雜性的情況下，輕鬆處理表單相關的邏輯。其中包括一個重要的功能 —— dirty 事件，可以手動觸發表單欄位的修改狀態。

本文將介紹 React Hook Form 中的 dirty 事件，以及如何使用它來追蹤和處理表單的修改狀態。

isDirty 事件

在 React Hook Form 中，isDirty 是一個用於追蹤整個表單的修改狀態的布林值。

formState 物件提供了許多有用的屬性，其中之一就是 isDirty 屬性。

isDirty 屬性用於判斷表單中的欄位是否被修改過，如果某個欄位的值被修改過，則 isDirty 屬性會變為 true，否則為 false。

簡單來說就是：

當任何一個表單欄位的值與初始值不同時，isDirty 將為 true。

這對於判斷是否需要顯示相關的提示或進行其他操作非常有用。

⚠️ 官方文件翻譯：
請確保在使用 useForm 時提供所有輸入項目的預設值（defaultValues），這樣 hook form 就可以有一個單一的來源來比較表單是否有變更。

但是呢... 實測拔掉 defaultValues 值時，即使沒有使用 defaultValues，只要使用者在輸入框中修改了任何一個值，isDirty 的值就會變為 true，並且提交按鈕將可用。

個人結論是，isDirty 可以單獨使用，用於判斷表單是否被修改過，而不一定需要與 defaultValues 搭配使用。

更白話解釋：雖然 defaultValues 可以在初始化表單時設置預設值，但即使沒有使用 defaultValues，只要表單欄位的值被修改過，isDirty 就會被標記為 true。

下方 CodePen 範例為有使用 defaultValues 實做的，但是把 defaultValues 拔掉變成下方模樣，也是可以運行，應該也要開發者自行評估表單一開始設計為何，但是感覺還是依照官方加一下 defaultValues 比較好。

  const { register, formState: { isDirty } } = useForm();

Example:

shouldDirty 事件

通常，當用戶在表單中輸入或選擇任何值時，isDirty 屬性會自動更新，因此無需手動處理。

但有時可能需要根據特定的條件來決定何時將欄位標記為已修改，也就是手動觸發 isDirty 事件。

為了實現這一點，React Hook Form 提供了 setValue 函數，該函數可以用於更新表單欄位的值。

除了更新值之外，我們還可以使用 setValue 函數來手動更新欄位的值並設置 shouldDirty 選項為 true。這將觸發 dirty 事件，並將 dirty 屬性設置為 true，即使使用者並沒有在輸入框中實際輸入任何值。

shouldDirty 是用於單個輸入欄位的事件，它用於自定義何時將該欄位標記為已修改。

默認情況下，當使用者開始與該欄位進行交互時，該欄位將被標記為已修改。

Example:

後記 - Epilogue

React Hook Form 的 dirty 事件為我們提供了一種方便的方式來追蹤和處理表單的修改狀態。通過使用 isDirty 屬性和 shouldDirty 函數，我們可以靈活地設置和控制表單的修改狀態。

想了解更多的話，可以點擊下方官方文檔。

參考資料 - Reference

[1] useFormState

https://react-hook-form.com/docs/useformstate