React Hook Formを勉強してみた①

はじめに

初めまして！
エンジニアになって数年、今まで本を読むだけでしたが、もっとプライベートで楽しみながら成長したい！自分が学んだ足跡を残していきたい！と思い記事を書きました！
最終的には自在に開発できるようになりたいと思っています。
いろいろな記事を参考にさせてもらっています。
その中でもこれってどういう意味？とかつまづいたところを念入りに書いていこうかと思います。

今回の目的

ブラウザ更新を制御する時ってどうするんだろうという時にReactHookFormをしっかり学んでみようと思いクイックスタートから学んでみました！

使用したものや事前準備

・Macbook Pro
・VSCode

主に参考にさせていただいた記事

reactプロジェクトのインストール

npx create-react-app sample-react-form

react-hook-formインストール

npm install react-hook-form

参考ソースでreact起動

app.jsに参考ソースをコピペして、Reactを立ち上げます。

npm start

下記の画像のように動作すればOKです。

react Hook Form

useFormで必要な関数を呼び出す。

1.register
2.handleSubmit
3.formState: { errors }
4.defaultValues
5.watch

registerとhandleSubmit

registerは、Form内で定義し、送信したい値を持つタグに配置します。
handleSubmitは、submitボタン押下時に入力データを引き渡す関数（アロー関数でも問題なし）をセットします。

<form onSubmit={handleSubmit(onSubmit)}>
    <input {...register("exampleRequired")} />
    <input type="submit" />
</form>

入力エラー

registerの後の記載のように、入力規則を設定できます。submit時に入力規則を違反しているとerrorsに格納されます。

// 入力エラーを格納
formState: { errors }
// ４文字に満たない場合はエラー
<input {...register("exampleRequired", { minLength: 4 })} />
// エラー内容の確認
{errors && console.log(errors)}

下記がエラー内容です。

さらにエラーメッセージを追加することができます。

{ minLength:{ value:4, message:'Min Length is 4'} }

エラーの追跡

再レンダリング後はエラーをReactが追跡し始めます。ここで注意したいのが、別のstateのレンダリングでもエラーの追跡が始まるということです。

const [count, setCount] = useState(0)

//下記のように関係のないstate更新でもエラーの追跡が始まります。
<button onClick={()=>{setCount(c=>c+1)}}>test</button>

defaultValuesで入力フォームの初期値をセットする

初期レンダリング時に、入力フォームにセットされます。
書き方①の場合は、存在しない場合はTypeScriptでエラー検知できるため推奨されています

// 書き方①
const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
} = useForm({defaultValues: {example: 'ここが初期値！'}})

// 書き方②
<input defaultValue="ここが初期値パート２！" {...register("exampleRequired")} />

入力値を追跡し、stateと同じようにレンダリングする

watch関数は、set関数を使った時のように値の変更と再レンダリングを行います。

const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
} = useForm({defaultValues: {example: 'ここが初期値！'}})

レンダリングを行うため、定数にセットすることで表示する値をリアルタイムに変更できます。

const example = watch('example')

//入力フォームにregisterをセットしていれば、入力に合わせて値が変化する
<span>{example}</span>

次

長くなったので、次へ