React MUI: TextField と react-form-hook による入力検証（ログイン画面サンプル）

ログイン画面はシステム開発で多くの場合作成することになると思います。今回は、React MUI の TextField と react-form-hook を組み合わせた、ログイン画面の入力検証機能を実装するサンプルを紹介します。

スクリーンショット

実装コード

App.tsx の実装コードを掲載します。

import React from "react";
import { useForm } from "react-hook-form";
import { Box, Button, TextField } from "@mui/material";

function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  const onSubmit = (data: any) => {
    console.log(data);
  };

  return (
    <Box>
      {/* フォームサブミット前に、handleSubmit が input
      コントロールの検証を行います。 */}
      <form
        onSubmit={handleSubmit(onSubmit)}
        style={{
          display: "flex",
          flexDirection: "column",
          width: "250px",
          margin: "3rem",
        }}
      >
        {/* register 関数を利用し、input コントロールを hook に登録します。 */}
        <TextField
          {...register("nameRequired", { required: true })}
          error={!!errors.nameRequired}
          id="name"
          label="名前"
          variant="outlined"
          helperText={!!errors.nameRequired && "名前を入力してください。"}
          style={{
            marginBottom: "1rem",
          }}
        />
        <TextField
          {...register("passwordRequired", { required: true })}
          error={!!errors.passwordRequired}
          id="password"
          label="パスワード"
          variant="outlined"
          type="password"
          helperText={
            !!errors.passwordRequired && "パスワードを入力してください。"
          }
          style={{
            marginBottom: "1rem",
          }}
        />
        <Button variant="contained" color="primary" type="submit">
          送信
        </Button>
      </form>
    </Box>
  );
}

export default App;

参考情報

react-form-hook と MUI、それぞれの公式サイトの実装例を参考にしました。

サンプルアプリケーション