昨天介紹了 useForm 的基本用法，今天來多介紹一些 React Hook Form 別的用法。

FormProvider

前幾天介紹了資料管理的 Context 和 Redux，他們可以透過 Provider 將資料傳遞進入下面的元件。
React Hook Form 也有類似的東西，當表單比較深 (比較多層) 時，可以使用 FormProvider 將資料傳入。
例如，我有一個巢狀表單：

const ChildForm = () => {
    return (
        <div>
            <input type="text" name="childTest"/>
        </div>
    )
}

const Form = () => {
    const {register, handleSubmit} = useForm();
    const onSubmit = (data) => {
        // handle data
    }
    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <ChildForm/>
            <button>提交</button>
        </form>
    )
}

我想要註冊內部的表單元件ChildForm，但是沒辦法註冊到內部，可以使用 FormProvider：

import {FormProvider, useForm} from 'react-hook-dom';

const ChildForm = (methods) => {
    const {register} = methods;
    return (
        <div>
            <input type="text" name="childTest"/>
        </div>
    )
}

const Form = () => {
    const {register, handleSubmit} = useForm();
    const onSubmit = (data) => {
        // handle data
    }
    return (
        <form onSubmit={handleSubmit(onSubmit)}>
          <FormProvider {register}>
            <ChildForm/>
          </FormProvider>
            <button>提交</button>
        </form>
    )
}

如果要傳入其他的方法也可以直接將整個 useForm 的回傳值傳入：

const methods = useForm();

//...

<FormProvider {...methods}>...</FormProvider>

watch

這是一個方法可以監聽註冊的欄位，傳入欄位的name，並且回傳他的值，在需要特定欄位資料時很方便。
偵測全部欄位：

watch()
// return : {name: value}

偵測特定欄位：

watch("test")
// return : value

也能傳入預設值：

watch("test", "default")
// return : default || value

偵測多個欄位：

watch(["test", "test2"])
// return : [value, value2]

參考官網範例，讓 age 欄位隱藏，勾選後才顯示：

function App() {
  const { register, watch } = useForm();
  const watchShowAge = watch("showAge", false); // you can supply default value as second argument

  return (
    <>
      <form>
        <input type="checkbox" {...register("showAge")} />
        
        {/* based on yes selection to display Age Input*/}
        {watchShowAge && <input type="number" {...register("age", { min: 50 })} />}
        
        <input type="submit" />
      </form>
    </>
  );
}

這幾個都非常有用，可以幫助我們在設計表單上更加簡潔，不需要自己用 state 再去設計流程。