React Hook Form

react hook form例

<form onSubmit={handleSubmit(onSubmit)}>

前半のform onSubmitのonSubmitは、単なるhtmlタグのようだ。

html例

 <form method="" action="" onsubmit="return submitCheck()">

handleSubmitには関数を渡せる。サンプルではonSubmit関数を渡している。

参考

よしにゃん

import { useForm, SubmitHandler } from "react-hook-form"

と

import * as rhf from "react-hook-form"

の違い。
上は、部分指定してimport。
下は、一度全部importして別名をつけている。
下は、rhf.関数名で呼べる。
上は、関数名で呼べる。

参考

よしにゃん

配列のindexを指定して監視

const first = useWatch({
    control,
    name: 'list.0', // 'fileList' 配列の最初の要素を監視
});

  const second = useWatch({
    control,
    name: 'list.1', // 'fileList' 配列の2番目の要素を監視
});

よしにゃん

useController と Controller の比較
useControllerは細かい制御が可能で、再利用しやすいらしい
Controllerは複数入力フィールドがあって、ラップしたり、外部ライブラリと一緒に使うときにシンプル実装できるらしい

useControllerのコンポーネントバージョンがControllerらしい。

参考

よしにゃん

useFormにzodResolverを指定する。
useFormContextには指定できない。

useForm<FormData>({ resolver: zodResolver(schema) })

よしにゃん

NiceModalと合わせて使うときはNiceModalごと、FormProviderで囲むといいらしい。

<FormProvider {...methods}>
      <NiceModal.Provider>
        // 省略
      </NiceModal.Provider>
</FormProvider>