【React】react-hook-formでフォームに初期値を設定する方法

react-hook-fromで初期値を設定する方法を3つご紹介します。

defaultValues

1つ目はdefaultValuesを使う方法です。

この方法が一番一般的だと思います。

import { useEffect } from 'react';
import { useForm, SubmitHandler } from 'react-hook-form';

type Inputs = {
  name: string;
};


const Sample = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<Inputs>({
    defaultValues: { name: '田中太郎' }
  });

  const onSubmit: SubmitHandler<Inputs> = (data) => {
    console.log(data);
  };

  return (
      <form onSubmit={handleSubmit(onSubmit)}>
          <input
            {...register('name', {
            required: true,
            })}
          />
        <button type="submit">Submit</button>
      </form>
  );
}

export default Sample;

setValue

2つ目の方法はsetValueを使います。

import { useEffect } from 'react';
import { useForm, SubmitHandler } from 'react-hook-form';

type Inputs = {
  name: string;
};


const Sample = () => {
  const {
    register,
    handleSubmit,
    setValue,
    formState: { errors },
  } = useForm<Inputs>();

  const onSubmit: SubmitHandler<Inputs> = (data) => {
    console.log(data);
  };

  useEffect(() => {
    setValue('name', '田中太郎')
  }, [])

  return (
      <form onSubmit={handleSubmit(onSubmit)}>
          <input
            {...register(`name`, {
            required: true,
            })}
          />
        <button type="submit">Submit</button>
      </form>
  );
}

export default Sample;

resetを使う

3つ目の方法ではresetを使います。

import { useEffect } from 'react';
import { useForm, SubmitHandler } from 'react-hook-form';

type Inputs = {
  name: string;
};


const Sample = () => {
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm<Inputs>();

  const onSubmit: SubmitHandler<Inputs> = (data) => {
    console.log(data);
  };

  useEffect(() => {
    reset({ name: '田中太郎' })
  }, [])

  return (
      <form onSubmit={handleSubmit(onSubmit)}>
          <input
            {...register(`name`, {
            required: true,
            })}
          />
        <button type="submit">Submit</button>
      </form>
  );
}

export default Sample;

swrで取得した値を初期値に設定する

swrなどで非同期にフェッチした値を初期値に設定したい場合もあると思いますが、その方法です。

"use client";

import useSWR from "swr";
import { useForm, SubmitHandler } from "react-hook-form";

type Inputs = {
  id: number;
  name: string;
};

const Sample = () => {
  const fetcher = async (url: string): Promise<Inputs> => {
    const response = await fetch(url);
    return response.json();
  };

  const { data, error, isLoading } = useSWR<Inputs>(
    "http://localhost:3100/api/users/3",
    fetcher
  );

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<Inputs>({
    defaultValues: {},
    values: data,
  });

  const onSubmit: SubmitHandler<Inputs> = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("name", {
          required: true,
        })}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default Sample;

IT技術ブログ
↓↓「にほんブログ村」のランキングに参加しています。少しでも面白い、参考になったとか思われたらポチッとしていただけると嬉しいです！

にほんブログ村