今天要來介紹一個第三方 api－React Hook Form ，這是一個處理表單的 api，可以幫助我們在 React 中更方便的處理表單。
其中，會主要介紹 useForm，這是處理表單上比較常用的一個 api，幫開發者減少很多處理程序及時間。

useForm 是什麼

useForm 是一個處理表單的套件，可以幫助開發者自定義處理表單。useForm 會將註冊後的表單轉換成一個 object，key 是 name、value 是輸入值，方便開發者處理。
要使用 useForm ，首先需要安裝 react-hook-form：

npm install react-hook-form

接著，要使用到裡面的 function，直接使用 useForm ，並取出我們要的東西：

import {useForm} from react-hook-form;

// component
    const {rigister, handleSubmit, formState: {errors}} = useForm();

Register

要使用表格的話，就要先"註冊"表格的欄位， useForm 只能偵測到有註冊的欄位並處理。要註冊欄位，必須使用 register 的 function。
最基本的語法如下：

const { onChange, onBlur, name, ref } = register('test'); 

<input 
  onChange={onChange} // assign onChange event 
  onBlur={onBlur} // assign onBlur event
  name={name} // assign name prop
  ref={ref} // assign ref prop
/>

另一種寫法，使用物件解構：

<input {...register("test")}/>

由於在註冊的時候已經將name寫進去了，不需要再特地寫name屬性。

除了基本的註冊，我們還可以加入欄位驗證，要求使用者必填、符合一定規則等等。
必填：

<input {...register("test", {
    required: true,
})}/>

必填，若未填回傳錯誤訊息：

<input {...register("test", {
    required: "必填"
})}/>

或者：

<input {...register("test", {
    required: {
        value: true,
        message: "必填"
    }
})}/>

除了必填外，也可以使用其他條件的驗證，例如常用的最大、最小長度：

// maxLength
<input {...register("test", {
    maxLength: {
        value: 16,
        message: "max 16 words"
    }
})}/>

// minLength
<input {...register("test", {
    minLength: {
        value: 5,
        message: "min 5 words"
    }
})}/>

密碼常用的字串判別，使用正規表達式：

<input 
  {...register("test", {
       pattern: {
      value: /[A-Za-z]{3}/,
      message: 'error'
    }
  })}
/>

其他還有很多，也有可以自訂判斷式的驗證，可以到這裡看其他的。

handleSubmit

再來是 handleSubmit，handleSubmit 是 react-hook-form 中負責處理 submit 的。當表單提交時便會觸發，觸發傳給他的 function；此外，他也能夠輕易的使用非同步函式，相當方便。
他有兩種寫法，可以這麼寫：

const onSubmit = (e) => {
    // handle submit
}

handleSubmit(onSubmit)(e);

也可以直接傳一個 callback function，handleSubmit會傳入一個 data 物件，也就是表單內容給 callback function。

handleSubmit(async (data)=>{
    // handle data & fetch data
})

formState

再來是 formState，formState 可以回傳表單欄位的狀態，例如 有沒有被修改、有沒有被提交...等等，這邊要特別介紹一個 errors 的 object，他可以取得未通過驗證欄位的錯誤訊息，在做驗證表單時很好用。
error message 會存在 errors object 中的 message 中，因此可以使用可選串連運算子( ?. )來確定有無 error message 並顯示。

const Form = () =>{
    const {register, formState: {errors}} = useForm();
    return (
        <form>
            <input {...register("test", {
                required: "必填"
            })}/>
            {/*有 error message 的話會出現在這裡*/}
            <p>{errors.message?.test}</p>
        </form>
    )
}

以上就是用 useForm 做簡單的表單處理，明天會再介紹更多用法，以及用 useForm 實作一個表單。

參考資料
useForm