【React】React Hook Formの "はじめる" を始めてみた Part6【Typescript】

この記事はReact Hook Formの公式サイトにあるはじめるの項目を元に構成されています。ReactとTypescriptのサンプルコードを使って解説しています。

こんにちは！らびです。今回はReact Hook Formに関する記事です。

公式サイトのチュートリアルを使って一緒に勉強していきましょう。

制御された Input

React Hook Formにおいて、入力フォームをいろいろな方法で制御することができます。今回はControllerというコンポーネントを使う方法とuseController()というHookを使う方法を紹介します。まずはそれぞれのサンプルコードをReactのプロジェクトにうつしてみましょう。

コンポーネント

import React from 'react';
import Select from "react-select";
import { useForm, Controller, SubmitHandler } from "react-hook-form";
import {List, ListItem, TextField, Checkbox} from '@mui/material';
import ResponsiveDrawer from '../components/layout/ResponsiveDrawer';

interface IFormInputs {
  TextField: string
  MyCheckbox: boolean
}

const Home6 = () => {
  const { handleSubmit, control, reset } = useForm<IFormInputs>();
  const onSubmit: SubmitHandler<IFormInputs> = (data) => {
    console.log(data);
  }
  
  return (
    <ResponsiveDrawer>
      <div>
        <form onSubmit={handleSubmit(onSubmit)}>
          <List>
            <ListItem>
              <label>MyCheckbox</label>
              <Controller
                name="MyCheckbox"
                control={control}
                defaultValue={false}
                rules={{ required: true }}
                render={({ field }) => <Checkbox {...field} />}
              />
            </ListItem><ListItem>
              <input type="submit" />
            </ListItem>
          </List>
        </form>
      </div>
    </ResponsiveDrawer>
  );
}
  
export default Home6;

Controllerコンポーネントにcontrolやrenderを渡して使っているジョ。

renderの無名関数にはfieldが渡されていますね。

コンポーネント（実行結果）

Hook

import React from 'react';
import Select from "react-select";
import { useForm, useController, UseControllerProps } from "react-hook-form";
import {List, ListItem} from '@mui/material';
import ResponsiveDrawer from '../components/layout/ResponsiveDrawer';

type FormValues = {
  FirstName: string;
};

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

  return (
    <div>
      <input {...field} placeholder={props.name} />
      <p>{fieldState.isTouched && "Touched"}</p>
      <p>{fieldState.isDirty && "Dirty"}</p>
      <p>{fieldState.invalid ? "invalid" : "valid"}</p>
    </div>
  );
}

const Home7 = () => {
  const { handleSubmit, control } = useForm<FormValues>({
    defaultValues: {
      FirstName: ""
    },
    mode: "onChange"
  });
  const onSubmit = (data: FormValues) => {
    console.log(data);
  }
  
  return (
    <ResponsiveDrawer>
      <div>
        <form onSubmit={handleSubmit(onSubmit)}>
          <List>
            <ListItem>
              <Input control={control} name="FirstName" rules={{ required: true }} />
            </ListItem><ListItem>
              <input type="submit" />
            </ListItem>
          </List>
        </form>
      </div>
    </ResponsiveDrawer>
  );
}
  
export default Home7;

今度は自作のInputコンポーネントの定義の中でuseControllerから取り出したfieldを割り当ててるジョ。

controlは自作コンポーネントを呼び出すときに割り当ててますね。

Hook（実行結果）

import

importについては、Controllerコンポーネントをインポートするか、useControllerというHookをインポートするかの違いがあります。

コンポーネント

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

Hook

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

Hookで自作コンポーネントを作るときにはUseControllerPropsも必要だジョ

実装

コンポーネント

<Controller
  name="MyCheckbox"
  control={control}
  defaultValue={false}
  rules={{ required: true }}
  render={({ field }) => <Checkbox {...field} />}
/>

Hook

<Input control={control} name="FirstName" rules={{ required: true }} />

Hookの場合は自作Inputの定義の中でfieldを渡していますね。

どちらも呼び出しのタイミングでcontrolを割り当ててるジョ。

まとめ

というわけで、今回もReact Hook Formのはじめるについて勉強してきましたが、いかがでしたでしょうか？

コンポーネントとHookの実装を比較することで、使い方のパターンがわかってきた気がします！

次回もぜひご覧ください。では！

参考

React Hook Form
react-hook-form.com