【typescript, React】react-hook-formでフォームを作るために必要最低限なこと

概要

react-hook-formを用いた、フォームの作り方を説明します。
validationなどの設定は置いておいて、本当に必要最低限のフォームを作るために必要なことをメモします。
言語はtypescriptを使用しています。

手順

1. react-hook-formのインストールとimport
2. 取得したいデータの型を定義する
3. registerとhandleSubmitをuseFormを用いて定義する。
4. handleOnSubmitを定義する。（関数名は他の名前でOK）
5. HTMLの記述

順を追って説明していきます。

具体的な実装

1.react-hook-formのインストールとimport

ターミナルを立ち上げて以下のコマンドを入力してください。

terminal

$ yarn add react-hook-form

その後react-hook-formを使いたいファイル内でimport文を書きます。

import { SubmitHandler, useForm } from 'react-hook-form'

ここでimportしたものは後で使用します。重要なのはuseFormです。

2. 取得したいデータの型を定義する

（例）

type ValuesType = {
  name: string
  age: number
  phone: number
}

上記のようにして入力してもらいたデータの型を定義しましょう。
フォームの値につける変数名:そのデータの型
のようにして定義していきます。

3. registerとhandleSubmitをuseFormを用いて定義する。

（例）

const { register, handleSubmit } = useForm<ValuesType>({
    mode: "onSubmit",
    reValidateMode: "onChange",
});

このようにしてregisterとhandleSubmitを定義します。これらの変数の名前は変更しないようにしましょう。
（もちろんmodeやreValidateModeには様々な変数を割り当てることができますし、それ以外にも多くのオプションを利用可能です。詳しくは公式のドキュメントが詳しいと思います。）

4. handleOnSubmitを定義します。

（例）

const handleOnSubmit: SubmitHandler<ValuesType> = (data) => {
    console.log(data)
}

最初にimportしたSubmitHandlerを型宣言に用います。
今回はコンソールに取得したデータを表示させているだけです。
（apiにそのデータを渡したいときは、ここでaxiosなどを用いてPostなどを行うことができます。）

5. HTMLの記述

（例）

return (
        <form
          onSubmit={handleSubmit(handleOnSubmit)}
        >
            <input
            type="text"
            {...register('name')}
            />
            <input
            type="number"
            {...register('age')}
            />
            <input
            type="number"
            {...register('phone')}
            />
            <input type="submit" />
        </form>
)

このようにしてフォームを作成します。inputタグの中の{...register('name')}という部分が肝で、これによって入力されたデータがどのデータに対応しているのかを記述しています。

まとめ

今回は必要最低限のreact-hook-formの使い方を説明しました。
個人的にはここまでくるのが、一番大変だったので記事にしました。
あとは色々なオプションについて公式ドキュメントなどを参照しながら、勉強してみてください！