拿鐵癌末期 | HANNAH's Blog
React Hook Form入門 | 純管理表單並完成與第三方框架配合的選擇 (上篇)

React Hook Form入門 | 純管理表單並完成與第三方框架配合的選擇 (上篇)

Chi Wu's photo
Chi Wu
·

2 min read

Table of contents

React Form 是一隻處理表單狀態的API，可以幫助我們用很輕鬆的方式控制表單，這次整理幾個我在使用React Hook Form常常使用到的方法在文章方便大家入門。

幾個你可以開始嘗試React Hook Form 的理由

  • 不需要任何多餘的 dependencies。

  • 各種UI框架友善，對Tailwinds的手刻黨也很適合。

  • 每個管理的方法明確，非常好學，可以立刻套用到目前在製作的表單上！

  • 支援TypeScript ❤️

💡 先上官方基礎的範例，從範例就可以大概看到React Hook From的幾種核心方法：

https://codesandbox.io/s/react-hook-form-get-started-j5wxo

這次打算用上下兩篇來大概介紹一下我在實戰中常用到的幾個API，帶領大家做一個簡單的React Hook Form入門。

useForm 註冊表單

const { register, handleSubmit } = useForm();

useForm是使用ReactHookForm最基礎的hook，幫助我們將整個表單的狀態保留成一份物件。在使用時需要將有需要用到的方法解構出來，像這份基本的表單解構了register、handleSubmit。

register 登記欄位

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

register 幫助我們登記每個欄位的名稱，基本上可以對應我們最後要送出data的key來命名，所以不允許重複命名相同的key。
同樣的，因為對應最後data的欄位，我們可以使用物件與陣列的方式來命名。

register("name.firstName") // Submit Result: {name: { firstName: 'value' }}
register("name.firstName.0") // Submit Result: {name: { firstName: [ 'value' ] }}

💡 在官方文件中有明確指出當我們需要將value儲存進array欄位時，也必須.來表示，不能使用 [] 括號來命名包含arra的值

register('test.0.firstName'); // 合法
register('test[0]firstName'); // 不合法

validation 驗證條件

通過 register，我們可以同時設置每個欄位的Rule， React Hook Form 提供以下幾種基礎的方式來驗證欄位：

  • required - 必填

  • min - number 可接受的最小值

  • max - number 可接受的最大值

  • minLength - string length 可接受的最大值

  • maxLength - string length 可接受的最小值

  • pattern - RegExp 正則表達式

  • validate - 自訂的驗證器，可放入多個callBackFunction

我們用剛剛 register 的欄簡單加上 validation ：

<input {...register("userName", {required: true, maxLength: 5})} />

當我們設定的驗證時機觸發，React Hook Form 就會按照我們所設定的validation 來檢查每個登記的欄位合不合法，如果希望UI 上可以呈現出自定義的錯誤訊息，我們可以將validation改成以下：

<input {...register("userName", {
         required: '使用者名稱必填', 
         maxLength: { 
             value:5,
             message: "姓名最多可輸入五個字元" }
        })} 
/>
{errors.userName?.type === 'required' && <p>{errors.userName?.message}</p>}
// ⬆️當使用者名稱沒有填寫，畫面渲染<p>使用者名稱必填</p>
{errors.userName?.type === 'maxLength' && <p>{errors.userName?.message}</p>}
// ⬆️當使用者名稱超過5碼，畫面渲染<p>姓名最多可輸入五個字元</p>

基本上我們可以用errors這個物件了來看到所有驗證不成功的欄位。

handleSubmit 送出表單

handleSubmit 可以放在任何可以觸發Function 的地方，ReactHookForm會再做一次表單驗證，如驗證皆合法的話即會觸發handleSubmit事件，並且將data物件作為函示傳入。

import { useForm, SubmitHandler } from "react-hook-form" 
// ⬆️ 除了import useFrom, 記得要多import SubmitHandler

export default function App() {
  const { register, handleSubmit } = useForm()
  const onSubmit = (data, e) => console.log(data, e)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} />
      <input {...register("lastName")} />
      <button type="submit">Submit</button>
    </form>
  )
}

常在實戰中用法是將handleSubmit 加入async ，來處理非同步的請求：

handleSubmit(onSubmit)();
handleSubmit(async (data) => await fetchAPI(data));

🌱 結語

這次文章先介紹的是幾隻在React Hook Form 最基礎的幾隻API，有興趣的人可以再觀看我的下篇，會介紹與觸發時機、外部套件結合的使用方式。

希望這篇文章有幫助到你，有任何錯誤與指教都歡迎留言告訴我！

參考文章：React Hook Form

Reactformreact-hook-form