Zenn
Closed7

React hook form の調査

React
古曳純基古曳純基

目的

React hook form を使用してフォームを作成したいが、React hook formの使い方が理解できていないため、理解度向上のためスクラップに記録していく。

最終的には、フォームをサブミットできるところまで理解する

古曳純基古曳純基

使い方

基本的には、useFormというフックスから変数と関数を吐き出して使用するようだ。
TSの場合、以下のように型定義するようだ。

type Inputs = {
  example: string,
  exampleRequired: string,
};
export default function App() {
  const { register, handleSubmit, watch, formState: { errors } } = useForm<Inputs>();

handleSubmit関数は、form要素の中のinputの中身をバリデーションしてくれるようだバリデーションしてくれるようだ

フォームの入力内容はhandleSubmitのコールバックの引数で受け取ることができるようです。

古曳純基古曳純基

useFormから吐き出したregisterには一意な名前を渡す必要があり、その戻り値をスプレッド構文を使用してinputに渡す必要があるようだ

<input {...register("firstName")} />

上記のコードを書くことで、インプットをフックに登録しているようだ。

ちなみにregisterの実装は以下のようになっているようだ。

register: (name: string, RegisterOptions?) => ({ onChange, onBlur, name, ref })

第一引数のnameにinputのキー（名前）を渡す。
第二引数には、インプットを必須にするかどうかなどのオプションを渡すようだ。
オプションについては後ほど説明。

戻り値には、onChangeやname, refなどのinputの要素に必要なプロパティが入っている

古曳純基古曳純基

handleSubmitの実装は以下の通りです。

handleSubmit: ((data: Object, e?: Event) => void, (errors: Object, e?: Event) => void) => Function

コールバックの第一引数には、サブミット時のインプット要素のデータの中身をまとめたオブジェクトを受け取るようになっている。
このオブジェクトを生成する際に、バリデーションを行うのだろうか。
オブジェクトの形式は、以下のようになるっぽい

{
  inputのname: inputのvalue
...
}
古曳純基古曳純基

register関数の第二引数にわたすパラメータは以下の通りです。
全てバリデーション時に確認する項目となっています。

  • required: 入力必須項目にするかどうか
  • min: 入力値の最小値
  • max: 入力値の最大値
  • minLength: 入力値の最小長さ（セレクターの時とか？）
  • maxLength: 入力値の最大長さ
  • pattern: 正規表現の登録（メールアドレスの入力時とか？）
このスクラップは2022/06/04にクローズされました