在 React 中使用 react-hook-form 進行表單處理時，當頁面被切割成多個元件並且這些元件共享同一份表單資料時，可以利用 FormProvider 和 useFormContext 來達到跨組件的資料傳遞與管理。以下是實現這個需求的步驟：

1. 用 FormProvider 包裹整個表單頁面
   FormProvider 是 React Hook Form 提供的上下文 (context) 提供者。將表單頁面用 FormProvider 包裹起來，可以讓整個頁面內的所有子元件共享相同的表單資料與方法。

import { useForm, FormProvider } from "react-hook-form";

export default function Page() {
  const methods = useForm();

  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        {/* 在這裡加入表單的子元件 */}
        <ChildComponent1 />
        <ChildComponent2 />
        {/* 其他子元件 */}
      </form>
    </FormProvider>
  );
}

2. 用 useForm 設定表單資料並通過 FormProvider 傳遞
   在 FormPage 中使用 useForm 來設定表單資料和方法，並通過展開運算符 ...methods 將這些資料傳遞給 FormProvider。這樣，所有在 FormProvider 包裹下的子元件都能夠通過 useFormContext 來訪問和操作這些資料。

3. 在各個子元件中使用 useFormContext 存取表單資料
   在子元件中使用 useFormContext 來存取父層提供的表單資料。這使得每個子元件都能夠獨立地操作表單的資料。

import { useFormContext, useWatch } from "react-hook-form";

function ChildComponent1() {
  const { register } = useFormContext();
  const watchedValue = useWatch({ name: "fieldName" });

  return (
    <div>
      <label htmlFor="field1">Field 1:</label>
      <input id="field1" {...register("field1")} />
      <p>Watched value: {watchedValue}</p>
    </div>
  );
}

function ChildComponent2() {
  const { register } = useFormContext();
  return (
    <div>
      <label htmlFor="field2">Field 2:</label>
      <input id="field2" {...register("field2")} />
    </div>
  );
}

useWatch 可以監聽表單資料的變化，從而實現即時更新子元件的顯示或狀態。這在需要根據其他表單欄位動態改變顯示內容或做其他操作時非常有用。

明天分享另一種跨組件傳遞狀態方式

參考資源
react-hook-form.com