今天來畫 React Hook Form 表單魔法陣吧！！先來看安裝方法以及一個簡單的範例：

1. 招喚表單魔法陣第一步：在 VS code 打開專案，打開終端機，輸入安裝指令，並在專案中導入

   npm install react-hook-form
   

   import { useForm } from "react-hook-form"
   

2. 招喚表單魔法陣第二步：建立表單架構～

   import { useForm } from "react-hook-form"
   
   export default function Form () {
     return (
       <form>
         <label>名字</label>
         <input />
         <label>性別</label>
         <select>
           <option value="M">男</option>
           <option value="F">女</option>
           <option value="OTHER">其他</option>
         </select>
         <label>Email</label>
          <input />
         <input type="submit" />
       </form>
     )
   }
   

3. 招喚表單魔法陣第三步：使用 useForm() 來建立具驗證功能的表單。

   import { useForm } from "react-hook-form"
   
   export default function Form() {
     // 使用 useForm 來管理表單的狀態，register 註冊輸入框，handleSubmit 處理表單提交，
     // errors 管理表單錯誤信息
     const { register, handleSubmit, formState: { errors } } = useForm()
   
     // 當表單通過驗證後，會觸發 onSubmit 函式，並將表單數據作為參數傳入，通常會在這裡串接API
     const onSubmit = (data) => console.log(data)
   
     return (
       {/* 當表單提交時，handleSubmit 會先驗證表單，如果驗證通過，則執行 onSubmit */}
       <form onSubmit={handleSubmit(onSubmit)}>
         <label>名字</label>
         {/* register 方法將這個輸入框註冊到表單中，並附加必填驗證規則 */}
         <input {...register("name", { required: "請輸入名字" })} />
         {/* 如果名字欄位有錯誤，顯示錯誤信息 */}
         {errors.name && ( <div>{errors.name.message}</div>)}
   
         <label>性別</label>
         {/* 性別下拉框，register 會驗證此欄位是否已被選擇 */}
         <select {...register("gender", { required: "請選擇性別" })}>
           <option value="M">男</option>
           <option value="F">女</option>
           <option value="OTHER">其他</option>
         </select>
         {/* 如果性別欄位有錯誤，顯示錯誤信息 */}
         {errors.gender && (<div>{errors.gender.message}</div>)}
   
         <label>Email</label>
         {/* register 方法註冊 Email 欄位，並附加必填和格式驗證規則 */}
         <input
          {...register("email", {
            required: "請輸入電子信箱", // 必填驗證
            pattern: {
              value:
                /^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-
                z]+$/, // 電子郵件格式驗證
              message: "請輸入正確的電子信箱", // 如果格式錯誤，顯示此訊息
            },
           })}
          />
         {/* 如果性別欄位有錯誤，顯示錯誤信息 */}
         {errors.email && ( <div>{errors.email.message}</div>)}
   
         <input type="submit" />
       </form>
     )
   }
   

   以上大約可以知道 React Hook Form 的使用方法，接下來再詳細介紹一下 useForm ，這是套件的核心，當我們呼叫 useForm，會得到一個物件，裡面包含很多方法與狀態，主要可以分成 三大類：註冊 (register)、操作 (methods)、狀態 (state)。

   1. 註冊：
      即 register，可將表單元素與 React Hook Form 進行 useRef 綁定，負責監聽輸入值、驗證規則、錯誤訊息。

   <input {...register("name", { required: "請輸入名字" })} />
   

   2. 操作：方法蠻多的，這邊簡單講幾個我比較常用到的（有問號的參數為選填，各種方法中的 options 參數，有相應的函式，不填就會走 React Hook Form 的預設行為，這邊不贅述），其中有些方法，我常在表單互動很複雜的時候使用，覺得蠻方便的！

   • handleSubmit(onValid, onInvalid?)：包裹在 form 標籤上的 onSubmit 中。

     • onValid：驗證通過時呼叫的函式
     • onInvalid：驗證失敗時呼叫的函式

   • watch(name?, defaultValue?)：監聽輸入值變化，回傳當前值。沒帶參數時會監聽整份表單。

   • setValue(name, value, options?)：手動設定欄位值。

   • getValues(name?)：取得目前表單的值。

   • reset(values?, options?)：重設表單 (回到初始值或指定值)。

   • resetField(name, options?)：重設單一欄位。

   • trigger(name?, options?)：觸發驗證 (單一欄位或整份表單)。

   3. 狀態：
      即 formState，裡面是一組狀態物件，可以即時反映表單目前的情況，但最常使用的還是
   • errors：驗證錯誤訊息集合。

另外在呼叫 useForm 的時候也能設置表單初始值、表單驗證時機以及與其他驗證套件整合：

const { register, handleSubmit, formState: { errors } } = useForm({
  defaultValues: {
    name: '',
    gender: null,
    email: '',
  },
  mode: "onChange",//表單驗證時機，其餘包含 onBlur | onSubmit | onTouched | all
  resolver: yupResolver(schema),//整合其他表單驗證套件
})

今天先大致停在這裡，明天再來補充 React Hook Form 如何與其他的元件庫、驗證套件做整合，不得不說，前端的表單要寫得好，搭配好的套件工具可以事半功倍啊啊啊啊啊><