React Hook Form V7でcontroledされたvalueを取り出して使う方法

React Hook Form V7でフォームを作成している時、他のモジュールと組み合わせる際にControledなvalueを渡す必要があったりします。

調べてみると、外部のControled ComponentとそのままReact Hook Formに渡してReact Hook Formで作成される値やStateを使う方法と、React Hook Formの値を分解してそれぞれの値をComponentに渡す方法がありましたので個人的なメモ。

Controller コンポーネントにコンポーネント毎渡す方法

Ract Hook FormのControllerコンポーネントに使いたいコンポーネントを渡す方法。

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

function App() {
  const { control } = useForm();
  
  return (
 (
    
  )}
/>
  );
}

react-hook-formからControllerコンポーネントを呼び出す。

useFormを使ってcontrolを作成。

render部分で、Controllerに「control={control}」を渡す。

renderにコールバック関数を渡す。

コールバック関数には、react-hoook-formが管理する値が渡されるので、その値を使ったコンポーネントを渡すようにする。

useControllerを使う

import * as React from "react";
import { useForm, useController, UseControllerProps } from "react-hook-form";

type FormValues = {
  FirstName: string;
};

function Input(props: UseControllerProps) {
  const { field, fieldState } = useController(props);

  return (
    

      
      {fieldState.isTouched && "Touched"}
      {fieldState.isDirty && "Dirty"}
      {fieldState.invalid ? "invalid" : "valid"}
    
  );
}

export default function App() {
  const { handleSubmit, control } = useForm({
    defaultValues: {
      FirstName: ""
    },
    mode: "onChange"
  });
  const onSubmit = (data: FormValues) => console.log(data);

  return (
    

      
      
    
  );
}

子コンポーネントで使う場合、useFormを使い「control」を作成し、コンポーネントに渡す。

コンポーネントでは、useControllerを使いreact-hook-formが管理する値を展開。

useControllerに渡すのは、nameは必須。うまく連携できない時はcontrolも渡す。

バリデーションルールやdefaulValueなども渡せる。

  const {
    field: { onChange, onBlur, name, value, ref },
    fieldState: { invalid, isTouched, isDirty },
    formState: { touchedFields, dirtyFields }
  } = useController({
    name,
    control,
    rules: { required: true },
    defaultValue: "",
  });

おわりに

React Hook Formのドキュメントを読んでいて、controllerの使い道が分からなかったのですが、自分が必要になってようやく理解できました。

フォームの値の管理をReact Hook Formで統一できるのは良いですね。