React Hook Form

>> 發文日期 : 2023/8/1

> 說明

表單處裡是前端開發中常見的功能,包含了驗證格式、資料處理、資料傳遞等等,常常會因為一堆的格式判斷或資料監聽而搞得非常混亂,所以在這裡我們使用React Hook Form來處理表單的常見功能,讓程式碼看起來更加簡潔。


> 範例

這是一個簡單的範例,這邊我們可以看到,使用useForm來作為表單的hook,其中包含了一些常用的功能,像是:

  • register : 註冊表單的欄位,並且可以設定驗證規則。
  • handleSubmit : 處理表單的submit事件。
  • watch : 監聽表單的欄位。
  • errors : 用來顯示錯誤訊息。