【react-hook-form】React×TypeScript×chakraUI/useFormを使ってバリデーションを実装しよう

Reactでフォームを作るときに、
ひとつひとつuseStateを使ったり、バリデーションを書くのが大変なのでReact Hook FormのuseFormを使います。

今回はchakraUIと併せて使っているので、
デザインも簡単に実装しています。

↓完成イメージ

react-hook-formをインストール

まずはインストールのコマンド入力。

$ npm install react-hook-form

useFormの実装

完成イメージのソースコードはこちらです。

import React from 'react';
import { FormLabel, Input, Button, VStack, Text, Box } from '@chakra-ui/react';


export const Register = () => {

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

  const handleRegisterSubmit =(data: any) => {
    // 処理を書く
  };

  return (
    <Box>
          <Text fontSize="xl">新規登録</Text>
          <VStack>
            <form
              onSubmit={handleSubmit(handleRegisterSubmit)}
              className="user-form"
            >
              <Box>
                <FormLabel htmlFor="email">
                  メールアドレス
                  <Input
                    id="email"
                    placeholder="メールアドレス"
                    // バリデーション
                    {...register('email', { required: true })}
                  />
                </FormLabel>
                {errors.email && (
                  <Text color="red.400">メールアドレスを入力してください</Text>
                )}
              </Box>
              <Box>
                <FormLabel htmlFor="password">
                  パスワード
                  <Input
                    type="password"
                    id="login-password"
                    placeholder="パスワード"
                    // バリデーション
                    {...register('password', { required: true })}
                  />
                </FormLabel>
                {errors.password && (
                  <Text color="red.400">パスワードを入力してください</Text>
                )}
              </Box>
              <Box>
                <Button mt={4} colorScheme="teal" type="submit">
                  登録
                </Button>
              </Box>
              <Text>ログイン画面へ</Text>
            </form>
          </VStack>
    </Box>
  );
};

methodについて

・register

フォームから入力された値のstate管理、バリデーション処理が可能です。
上記ソースコードでもフォームの値を受け取って、項目入力必須のバリデーション処理を書いています。

・handleSubmit

フォームをsubmitした時の処理を書きます。
handleSubmit()の引数は二つで、
引数1はバリデーション処理がOKの場合の関数、
引数2はバリデーション処理がNGの場合に呼ばれる関数が入ります。

上記コードでは、バリデーション処理がokの処理のみで十分なので、引数は一つにしています。

・formState

フォームの状態をobjectで管理しています。
フォームでエラーになった場合、errors.[項目名]にエラーのobjectが入ります。
上記コードでは、erros.[項目名] &&　でエラーの場合にメッセージが出るようにしています。

今回つかったのはこんな感じでした！

他にもメソッドや使い方はあるようなのですが
よく使うのはこのあたりだと思うのでまとめました。

また、chakraUIのコンポーネントを使うことで
設定をしなくてもある程度見やすいようになっているので
とても便利です。

これでフォームも楽に書けますね！