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

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

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

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

エラーを処理する

今回はバリデーションでエラーを検知した際の挙動について紹介します。まずはサンプルコードをReactのプロジェクトにうつしてみましょう。

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

interface IFormInputs {
  firstName: string
  lastName: string
}

const Home8 = () => {
  const { register, formState: { errors }, handleSubmit } = useForm<IFormInputs>();
  const onSubmit: SubmitHandler<IFormInputs> = (data) => {
    console.log(data);
  }
  
  return (
    <ResponsiveDrawer>
      <div>
        <form onSubmit={handleSubmit(onSubmit)}>
          <List>
            <ListItem>
              <label>First Name</label>
              <input {...register("firstName", { required: true })} />
              {errors.firstName && "First name is required"}
            </ListItem><ListItem>
              <label>Last Name</label>
              <input {...register("lastName", { required: true })} />
              {errors.lastName && "Last name is required"}
            </ListItem><ListItem>
              <input type="submit" />
            </ListItem>
          </List>
        </form>
      </div>
    </ResponsiveDrawer>
  );
}
  
export default Home8;

errorsのプロパティでエラー判定しているジョ。

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

import

importはuseFormとSubmitHandlerだけでOKです。

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

プログラムを読み進めていくと、formState: { errors }を取り出して使っているのがわかりますね。

const { register, formState: { errors }, handleSubmit } = useForm<IFormInputs>();

実装

<label>First Name</label>
<input {...register("firstName", { required: true })} />
{errors.firstName && "First name is required"}

errorsのプロパティの真偽判定をしてエラー処理しているジョ。

まとめ

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

errorsのプロパティから判定結果を読み取るのがポイントですね。

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

参考

React Hook Form
react-hook-form.com