react-hook-formで最低限

2022-02-12

react-hook-form を使用してフォーム周りを最低限で実装してみました。

import { useEffect } from "react"; import { SubmitHandler, useForm } from "react-hook-form"; type FieldValues = { content: string; }; export type HogeFormProps = { defaultValues?: FieldValues; onSubmit: SubmitHandler<FieldValues>; }; function HogeForm({ defaultValues, onSubmit }: HogeFormProps): JSX.Element { const { formState: { isSubmitted, isSubmitting }, handleSubmit, register, reset, } = useForm<FieldValues>({ defaultValues: defaultValues || { content: "", }, }); useEffect(() => { if (!isSubmitted) { return; } reset(); }, [isSubmitted, reset]); return ( <form onSubmit={handleSubmit(onSubmit)}> <textarea {...register("content", { required: true })} /> <button disabled={isSubmitting}>送信する</button> </form> ); } export default HogeForm;

isSubmitSuccessful といった値もあるので、いろいろと自由度は高そうです。

submit したあとにどうやってフォームをクリアしたら良いのかなーと思っていたのですが、さすが react-hook-form ですね。

組みやすさは他のパッケージより頭 2 つ 3 つ抜けている印象です。

© 2018 kk-web