这篇文章的目的是什么？

• react-hook-formを使用したときの備忘録

Reactのプロジェクトでログイン機能追加する際の備忘録

总结

• React-hook-formについて

• 下準備

• React-hook-formインストール

• React-hook-formの使い方

【補足】バリデーション管理（zod）

关于 React Hook Form

React Hook Form是用于React的表单验证库。它不仅可以获取输入元素的值，还具备验证功能，可以轻松实现表单。即使是那些不喜欢创建输入表单的人，也可以借助该库来减少创建表单的麻烦。关于验证，React Hook Form本身也具备功能，并且还介绍了使用验证库Yup和Zod的设置方法。

简单来说，是指可以轻松创建带有验证功能的输入表单的工具吗！就是指React-hook-form的官方网站。

迄今为止的做法

以前在创建类似登录表单的时候，必须使用useState来进行用户登录时的用户名、邮箱和密码的处理。这样做的话就需要编写提交函数、管理各个元素的状态，代码也会变得更复杂。仅仅是制作一个表单就感觉很麻烦。

准备好

由于使用了React-icon组件，以下是安装命令。
另外，关于React-icon，可以参考这里。

npm install react-icons --save

安装React-hook-form。

请使用以下命令进行安装。

npm install react-hook-form

这个命令可以在 React-hook-form 官方网站上找到。

React Hook Form的使用方法

我們將按照下面的方式進行編輯。
我們在React-hook-form的部分進行了註解來進行說明。
同時，我們也加入了一些簡單的驗證功能。

import { AiFillLock, AiFillMail } from "react-icons/ai";
import { FaUser } from "react-icons/fa";
import "./App.css";

// React-hook-formライブラリのuseForm関数をインポート
import { useForm } from "react-hook-form";

// ログインフォームのデータ型を定義
interface LoginForm {
  username: string;
  email: string;
  password: string;
}

function App() {
  // useForm関数を呼び出して、各種設定を行う
  const {
    register, // inputタグとバリデーションルールを紐付けるための関数
    handleSubmit, // フォームのsubmitイベント時に呼ばれる関数
    formState: { errors }, // バリデーションエラーの情報が格納
  } = useForm<LoginForm>({ mode: "onChange" }); // mode: "onChange"で入力時バリデーション

  // フォームのsubmitイベントで呼ばれる関数
  const onSubmit = (data: LoginForm) => console.log(data);

  return (
    <>
      <section>
        <h1>Login From</h1>
        <form onSubmit={handleSubmit(onSubmit)}>
          <label htmlFor="username">
            <FaUser color="#888888" />
            ユーザー名
          </label>
          {/* {...register("フィールド名", { ルール })}で、フィールド登録、必ルールを設定 */}
          <input
            id="username"
            type="text"
            placeholder="username"
            {...register("username", {
              required: "ユーザー名を入力して下さい",
              minLength: { value: 5, message: "５文字以上で入力して下さい" },
            })}
          />
          <p>{errors.username?.message as React.ReactNode}</p>

          <label htmlFor="email">
            <AiFillMail color="#888888" />
            メールアドレス
          </label>
          {/* {...register("フィールド名", { ルール })}で、フィールド登録、必ルールを設定 */}
          <input
            id="email"
            type="email"
            placeholder="email"
            {...register("email", {
              required: "メールアドレスを入力して下さい",
            })}
          />
          <p>{errors.email?.message as React.ReactNode}</p>

          <label htmlFor="password">
            <AiFillLock color="#888888" />
            パスワード
          </label>
          {/* {...register("フィールド名", { ルール })}で、フィールド登録、必ルールを設定 */}
          <input
            id="password"
            type="password"
            placeholder="password"
            {...register("password", {
              required: "パスワードを入力して下さい",
              minLength: { value: 6, message: "6文字以上で入力して下さい" },
            })}
          />
          <p>{errors.password?.message as React.ReactNode}</p>

          <button type="submit">登録</button>
        </form>
      </section>
    </>
  );
}

export default App;

函数说明

验证说明

【補充】验证管理（zod）

Zod是一种可以通过设置模式来进行验证的工具。它是一个验证库。
简单来说，就是将验证规则集中定义并进行统一管理，而不是将验证规则直接写在输入中，使得操作更加方便。你可以在Zod的官方网站上找到更多信息。

安装Zod

通过在`useForm`的解析器中使用，可以使用`Zod`，因此需要安装`@hookform/resolvers`。

npm install zod
npm install @hookform/resolvers

验证定义

我正在创建一个名为src/utils/validationSchema.ts的文件。

import { z } from "zod";

// Zodによるバリデーションスキーマの定義
export const validationSchema = z.object({
  username: z
    .string()
    .nonempty("ユーザー名を入力して下さい") // 非空文字列チェック
    .min(5, "５文字以上で入力して下さい"), // 最小文字数チェック
  email: z
    .string()
    .nonempty("メールアドレスを入力して下さい") // 非空文字列チェック
    .email("メールアドレスを正しい表記で入力して下さい"), // Email形式チェック
  password: z
    .string()
    .nonempty("パスワードを入力して下さい") // 非空文字列チェック
    .min(6, "6文字以上で入力して下さい"), // 最小文字数チェック
});

表格部分的修改

如果将src/App.tsx更改如下，我认为将会应用验证。

如果你按照下面的方式更改src/App.tsx，我认为验证将会生效。

我认为如果将src/App.tsx更改成下面的形式，验证就会生效。

只要按照下面的方式更改src/App.tsx，我认为验证将会被应用。

import { AiFillLock, AiFillMail } from "react-icons/ai";
import { FaUser } from "react-icons/fa";
import "./App.css";
import { useForm } from "react-hook-form";
import { validationSchema } from "./utils/validationSchema";
import { zodResolvers } from "@hookform/resolvers/zod";

interface LoginForm {
  username: string;
  email: string;
  password: string;
}

function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<LoginForm>({
    mode: "onChange",
    resolver: zodResolvers(validationSchema),
  });
  return (
    <>
      <section>
        <h1>Login From</h1>
        <form onSubmit={handleSubmit(onSubmit)}>
          <label htmlFor="username">
            <FaUser color="#888888" />
            ユーザー名
          </label>
          {/* {...register("フィールド名", { ルール })}で、フィールド登録、必ルールを設定 */}
          <input
            id="username"
            type="text"
            placeholder="username"
            {...register("username")}
          />
          <p>{errors.username?.message as React.ReactNode}</p>

          <label htmlFor="email">
            <AiFillMail color="#888888" />
            メールアドレス
          </label>
          <input
            id="email"
            type="email"
            placeholder="email"
            {...register("email")}
          />
          <p>{errors.email?.message as React.ReactNode}</p>

          <label htmlFor="password">
            <AiFillLock color="#888888" />
            パスワード
          </label>
          <input
            id="password"
            type="password"
            placeholder="password"
            {...register("password")}
          />
          <p>{errors.password?.message as React.ReactNode}</p>

          <button type="submit">登録</button>
        </form>
      </section>
    </>
  );
}

export default App;