React Hook Form ライブラリの使い方！フォームのバリデーションを実装しよう【 TypeScript 】

// 制御コンポーネントの具体例

import { useState } from "react";

export default function App() {
  const [state, setState] = useState<string>("");

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    alert("名前: " + state);
  };

  const handleChange = (e: React.FormEvent<HTMLInputElement>) => {
    setState(e.currentTarget.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        名前
        <input type="text" value={state} onChange={(e) => handleChange(e)} />
      </label>
      <button>実行する</button>
    </form>
  );
}

// 非制御コンポーネントの具体例

import { useRef } from "react";

export default function App() {
  const input = useRef<HTMLInputElement>(null);

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    alert("名前: " + input.current);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        名前
        <input type="text" ref={input} />
      </label>
      <button>実行する</button>
    </form>
  );
}

// npm を使う場合
npm install react-hook-form

// yarn を使う場合
yarn install react-hook-form

// 通常版
npx create-react-app アプリ名 

// TypeScript対応版
npx create-react-app アプリ名 --template typescript

import "./styles.css";
// react-hook-formから、useFormとSubmitHandlerをimport
// SubmitHandlerは、submitイベントに関する関数の型宣言に使う
import { useForm, SubmitHandler } from "react-hook-form";

// フォームの入力値についての型定義。useFormフックを書く時に使う。
type FormInput = {
  name: string;
  age: number;
};

export default function App() {
  // useFormフックを使い、registerとhandleSubmitを取得する。
  // registerは、フォームのフィールドを登録することで、バリデーションを機能させる。
  // handleSubmitは、submitイベントの制御に関わる。
  const { register, handleSubmit } = useForm<FormInput>();

  // submitイベントが発生して、かつバリデーションが成功した場合に実行する関数。
  // サンプルコードなので、入力値（data）をコンソール出力するだけの処理を用意。
  const onSubmit: SubmitHandler<FormInput> = (data) => console.log(data);

  return (
    // handleSubmitの第1引数は、バリデーションを通った場合にのみ実行される。
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>
        名前
        {/* registerの第1引数の文字列は、name属性の値としても利用される。 */}
        {/* registerの第2引数には、バリデーションの種類を設定できる。 */}
        {/* requiredにtrueを設定すると、入力必須の状態になる。 */}
        <input {...register("name", { required: true })} />
      </label>
      <label>
        年齢
        <input type="number" {...register("age", { required: true })} />歳
      </label>
      <button>送信する</button>
    </form>
  );
}

import "./styles.css";
// react-hook-formから、useFormとSubmitHandlerをimport
// SubmitHandlerは、submitイベントに関する関数の型宣言に使う
import { useForm, SubmitHandler } from "react-hook-form";

// フォームの入力値についての型定義。useFormフックを書く時に使う。
type FormInput = {
  name: string;
  age: number;
};

export default function App() {
  // useFormフックを使い、registerとhandleSubmitを取得する。
  // registerは、フォームのフィールドを登録することで、バリデーションを機能させる。
  // handleSubmitは、submitイベントの制御に関わる。
  const { register, handleSubmit } = useForm<FormInput>();

  // submitイベントが発生して、かつバリデーションが成功した場合に実行する関数。
  // サンプルコードなので、入力値（data）をコンソール出力するだけの処理を用意。
  const onSubmit: SubmitHandler<FormInput> = (data) => console.log(data);

  return (

  {/* 途中省略 */}

  

  return (
    // handleSubmitの第1引数は、バリデーションが成功した場合にのみ実行される。
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>
        名前
        {/* registerの第1引数の文字列は、name属性の値としても利用される。 */}
        {/* registerの第2引数には、バリデーションの種類を設定できる。 */}
        {/* requiredにtrueを設定すると、入力必須の状態になる。 */}
        <input {...register("name", { required: true })} />
      </label>
      <label>
        年齢
        <input type="number" {...register("age", { required: true })} />歳
      </label>
      <button>送信する</button>
    </form>
  );