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