Reactでフォームを作成および管理するためのreact-hook-formの使用例

react-hook-formとは

react-hook-formは、Reactでフォームを作成および管理するためのライブラリです。
以下はその特徴と基本的な使い方です。

特徴

1. シンプルなAPI:

• フォームのバリデーションやデータの取得が簡単に行えます。

2. パフォーマンスの向上:

• 不要な再レンダリングを減らす設計になっています。

3. バリデーションのサポート:

• 標準のHTML5バリデーションに加えて、Yupなどの外部ライブラリと組み合わせて複雑なバリデーションも実装できます。

4. 小さなバンドルサイズ:

• 他のフォーム管理ライブラリと比較して軽量です。

5. 簡単なエラーハンドリング:

• バリデーションエラーやサーバーエラーのハンドリングが簡単に行えます。

基本的な使い方

インストール

npmの場合

npm install react-hook-form

yarnの場合

yarn add react-hook-form

基本的なフォームの例

import React from 'react';
import { useForm } from 'react-hook-form';

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

  console.log(watch("example")); // ウォッチ機能でフォームの値を監視

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input defaultValue="test" {...register("example")} />
      {errors.example && <span>This field is required</span>}
      
      <input type="submit" />
    </form>
  );
}

バリデーションを追加した場合の例

import React from 'react';
import { useForm } from 'react-hook-form';

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input 
        {...register("exampleRequired", { required: true })}
      />
      {errors.exampleRequired && <span>This field is required</span>}
      
      <input type="submit" />
    </form>
  );
}

このようにして、簡単にフォームの作成、バリデーション、エラーハンドリングが可能です。
react-hook-formを使うことで、よりシンプルでパフォーマンスの高いフォームを作成することができます。

react-hook-formのcontrollerの使い方

react-hook-formのControllerは、非制御コンポーネント（例：サードパーティライブラリのコンポーネントなど）をフォームと統合するために使用します。
以下は、Controllerの基本的な使い方の例です。

基本的な使い方

サードパーティコンポーネントとの統合

ここでは、Material-UIのTextFieldを例にして、Controllerを使用する方法を説明します。

import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import TextField from '@mui/material/TextField';

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="example"
        control={control}
        defaultValue=""
        rules={{ required: 'This field is required' }}
        render={({ field }) => 
          <TextField
            {...field}
            label="Example"
            error={!!errors.example}
            helperText={errors.example ? errors.example.message : ''}
          />
        }
      />
      <input type="submit" />
    </form>
  );
}

export default MyForm;

詳細な使い方

バリデーションの追加

Controllerを使ってバリデーションルールを追加できます。
以下の例では、requiredとmaxLengthのバリデーションを追加しています。

import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import TextField from '@mui/material/TextField';

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="example"
        control={control}
        defaultValue=""
        rules={{
          required: 'This field is required',
          maxLength: {
            value: 10,
            message: 'Max length is 10'
          }
        }}
        render={({ field }) => 
          <TextField
            {...field}
            label="Example"
            error={!!errors.example}
            helperText={errors.example ? errors.example.message : ''}
          />
        }
      />
      <input type="submit" />
    </form>
  );
}

export default MyForm;

サードパーティライブラリとの使用例

Material-UIのSelectコンポーネントとControllerを組み合わせた例です。

import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import TextField from '@mui/material/TextField';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="example"
        control={control}
        defaultValue=""
        rules={{ required: 'This field is required' }}
        render={({ field }) => 
          <TextField
            {...field}
            label="Example"
            error={!!errors.example}
            helperText={errors.example ? errors.example.message : ''}
          />
        }
      />
      <Controller
        name="selectExample"
        control={control}
        defaultValue=""
        rules={{ required: 'This field is required' }}
        render={({ field }) => 
          <Select
            {...field}
            error={!!errors.selectExample}
          >
            <MenuItem value=""><em>None</em></MenuItem>
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
          </Select>
        }
      />
      {errors.selectExample && <span>This field is required</span>}
      <input type="submit" />
    </form>
  );
}

export default MyForm;

Controllerを使用することで、react-hook-formとサードパーティコンポーネントをスムーズに統合し、フォームのバリデーションやデータ管理を簡単に行うことができます。