Closed2

React Hook Form

てりーてりー

tutorialやってみた。

https://www.youtube.com/watch?v=DN8v7_RbVlc&ab_channel=BillLuo

React Hook Formの特徴

React Hook Formは制御されていないコンポーネントを採用している為、無駄なレンダリングが少なく、パフォーマンスが良い!!

制御されたコンポーネントは遅い

htmlのformタグは自身が状態を保つので、reactでは通常「制御されたコンポーネント」を採用しています。それだとあらゆるデータの変更に対してイベントハンドラが働きレンダリングが走るので、重くなりがちです。

参考:https://ja.reactjs.org/docs/forms.html


export const App = () => {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm<Inputs>();
  const onSubmit = (data: any) => console.log(data);

  return (
    /* "handleSubmit" will validate your inputs before invoking "onSubmit" */
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* ...register("~")でformの値を保持できる */}
      <label htmlFor="firstName">firstName</label>
      <input {...register("firstName", { required: "This is required" })} />
      {errors.firstName && <p>{errors.firstName.message}</p>}
      <label htmlFor="lastName">lastName</label>
      <input
        {...register("lastName", {
          required: "This is required",
          maxLength: { value: 4, message: "You exceeded the maxLength" },
        })}
      />
      {errors.lastName && <p>{errors.lastName.message}</p>}
      <label htmlFor="age">age</label>
      <input {...register("age")} />
      <input type="submit" />
    </form>
  );
};

register

フォームの値をstateとして登録して様々な場面で使えるようにする。

watch()

registerの値を監視できる。

handleSubmit()

register に入っている値を保持して submit 時の処理を行う。

required

フォームに様々なバリデーションを付けられる。
主な例

  • requierd:trueでフィールドが必須。
  • maxLength、minLengthで文字入力の最大最小値。
  • max,min数値入力の最大最小値。

errorsハンドル

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

useFormからエラーオブジェクトにアクセスする。
requiredはbooleanの代わりにstringを渡す事で、errors.messageに出来る。

     <input {...register("firstName", { required: "This is required" })} />
      {errors.firstName && <p>{errors.firstName.message}</p>}

github:https://github.com/gunners6518/React-Hook-Form-Tutorial

てりーてりー

useForm

公式ドキュメント参考に。
https://react-hook-form.com/api/useform/

useFormはフォームの管理するカスタムフック。

オプション

mode

registerをいつ検証するか。デフォルトはonSubmit

reValidateMode

エラー後の再検証をいつするか。デフォルトはonChange

defaultvalue

初期値

resolver

外部の認証ライブラを使用可能。
ここで設定する。

このスクラップは2021/11/19にクローズされました