React Hook Form フォームの中身をreset

フォームの中身をReset

フォームの中身を全部、もしくは一部のみreset(空)の状態にすることを学習したのでアウトプット。
*学習メモです。
*すべてドキュメントに載っています

React Hook Form v7

全てをReset

reset関数の引数を何も指定することで、全てresetすることができます！

Form.tsx

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

interface UseFormInputs {
  mailAddress: string
  password: string
}

export default function Form() {
  const { register, handleSubmit, reset } = useForm<UseFormInputs>();
  const onSubmit = (data: UseFormInputs) => {
    reset()　// <= 引数0だとすべてをreset
  };

  return (
    <div>
      <h1>リセット試す用のフォームです</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input 
            autoComplete="email"
            type="email"
            aria-invalid={errors.mailAddress ? "true" : "false"}
            {...register("mailAddress", { required: true, pattern: /^([a-zA-Z0-9])+([a-zA-Z0-9\._+-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/ })}
            placeholder="メールアドレスを入力してください"
        />
        <input
          autoComplete="password"
          type="password"
          {...register("passWord", { required: true, pattern: /^[a-z\d]{1,100}$/i })}
          aria-invalid={errors.passWord ? "true" : "false"}
          placeholder="パスワードを入力してください"
          css={FormInput}
        />
        <input type="submit" />
      </form>
  </div>
  );
}

一部をReset

フォームの一部先ほどのフォームの例でいうと、メールアドレスだけをリセットさせたい場合もあると思います。

resetで引数を指定

resetにてregisterで指定したname属性をresetの第一引数でname属性とvalueをセットすると一部のリセットを可能とします。

Form.tsx

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

interface UseFormInputs {
  mailAddress: string
  password: string
}

export default function Form() {
  const { register, handleSubmit, reset } = useForm<UseFormInputs>();
  const onSubmit = (data: UseFormInputs) => {
    reset({ mailAddress: '' })　//<= mailAddressをリセットする。
  };

  return (
    <div>
      <h1>リセット試す用のフォームです</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input 
            autoComplete="email"
            type="email"
            {...register("mailAddress", { required: true, pattern: /^([a-zA-Z0-9])+([a-zA-Z0-9\._+-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/ })}
            placeholder="メールアドレスを入力してください"
        />
        <input
          autoComplete="password"
          type="password"
          {...register("passWord", { required: true, pattern: /^[a-z\d]{1,100}$/i })}
          placeholder="パスワードを入力してください"
        />
        <input type="submit" />
      </form>
  </div>
  );
}

おわりに

めっちゃ短いアウトプットにはなりましたが学習メモなのでよしと思っておきます。
他にもresetする方法はあると思われるのですが
例）Event.target.value = ''

React Hook Formが用意されているresetでするのがいいのかなと思っています。

参考文献

React Hook Form ドキュメント
React Hook Form ドキュメント　api#reset