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

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

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

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

インストール
サンプルコード
import
register
handleSubmit
watch
formState
まとめ
参考

インストール

下記のコマンドを使ってReactのプロジェクトにreact-hook-formをインストールします。

$ npm install react-hook-form

2022年1月8日の時点では、ver.7.22.5がインストールされるジョ。

サンプルコード

それではサンプルコードをReactのプロジェクトで実行してみます。

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

type Inputs = {
  example: string,
  exampleRequired: string,
};

const Home = () => {
  const { register, handleSubmit, watch, formState } = useForm<Inputs>();
  const onSubmit: SubmitHandler<Inputs> = (data) => {
    console.log(data);
  }

  console.log(watch("example"));
  
  return (
    <ResponsiveDrawer>
      <div>
        <form onSubmit={handleSubmit(onSubmit)}>
          <List>
            <ListItem>
              {/* register your input into the hook by invoking the "register" function */}
              <input defaultValue="test" {...register("example", { required: false })} />
            </ListItem><ListItem>
              {/* include validation with required or other standard HTML validation rules */}
              <input defaultValue="test" {...register("exampleRequired", { required: true })} />
              {/* errors will return when field validation fails  */}
              {formState.errors.exampleRequired && <span>This field is required</span>}
            </ListItem>
            <ListItem>
              <input type="submit" />
            </ListItem>
          </List>
        </form>
      </div>
    </ResponsiveDrawer>
  );
}
  
export default Home;

サンプルコードの中身を順に解説していきます。

import

まずはimportについて、useFormとSubmitHandlerの２つをインポートしています。react-hook-formはフォームの入力制御を目的としたライブラリです。useFormによってチェック対象の入力コンポーネントを登録し、SubmitHandlerによってフォームのサブミット時の処理を制御します。

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

今回のサンプルではexampleとexampleRequiredの２つの入力コンポーネントを対象としますので、exampleとexampleRequiredというプロパティを持つInputsという型を定義します。定義した型をuseFormのジェネリクスパラメータとして渡すと、それぞれの関数やプロパティ（ここで言うと”register, handleSubmit, watch, formState”）で使えるようになります。

type Inputs = {
  example: string,
  exampleRequired: string,
};

const Home = () => {
  const { register, handleSubmit, watch, formState } = useForm<Inputs>();

…

register

registerは入力コンポーネントをuseFormに登録する作業です。下記の例ではuseFormのジェネリクスパラメータとして渡した、exampleRequiredに登録しています。

<input defaultValue="test" {...register("exampleRequired", { required: true })} />

registerの第二引数はRegisterOptions型として定義されていて入力制御の内容を指定できます。今回はrequiredがtrue（必須項目）として指定されています。

export declare type RegisterOptions<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Partial<{
    required: Message | ValidationRule<boolean>;
    min: ValidationRule<number | string>;
    max: ValidationRule<number | string>;
    maxLength: ValidationRule<number>;
    minLength: ValidationRule<number>;
    pattern: ValidationRule<RegExp>;
    validate: Validate<FieldPathValue<TFieldValues, TFieldName>> | Record<string, Validate<FieldPathValue<TFieldValues, TFieldName>>>;
    valueAsNumber: boolean;
    valueAsDate: boolean;
    value: FieldPathValue<TFieldValues, TFieldName>;
    setValueAs: (value: any) => any;
    shouldUnregister?: boolean;
    onChange?: (event: any) => void;
    onBlur?: (event: any) => void;
    disabled: boolean;
    deps: InternalFieldName[];
}>;

handleSubmit

handleSubmitは、onSubmitで指定した関数にregisterで登録した入力コンポーネントの値を引き渡します。下記の例ではonSubmitの引数としてInputs型のdataが渡されます。

const onSubmit: SubmitHandler<Inputs> = (data) => {
  console.log(data);
}

…省略

<form onSubmit={handleSubmit(onSubmit)}>

…

watch

watchは入力コンポーネントの値を取得します。下記の例ではexampleの値を取得してconsole.log()に渡しています。

console.log(watch("example"));

入力コンポーネントの値が更新されるとレンダリングが走るジョ。今回のサンプルだといずれかの入力コンポーネントの値が更新されるとexampleの値がログに吐かれるジョ。

formState

入力コンポーネントをuseForm側で判定した結果を取得できます。下記の例ではexampleRequiredの値をuseFormでエラー判定した結果を取得できます。

{/* include validation with required or other standard HTML validation rules */}
<input defaultValue="test" {...register("exampleRequired", { required: true })} />
{/* errors will return when field validation fails  */}
{formState.errors.exampleRequired && <span>This field is required</span>}