【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;

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