Reactでバリデーション機能を備えた入力フォームを作成する際、React Hook Formを使用しました。
便利な機能が数多くあり、ブログで簡単にまとめたいなと思い執筆しました。
そこで、今回はよく使用されるuseFormのフックで使用できるメソッドについてまとめました。
良ければ見ていってください。
React Hook Formとは
Reactアプリケーションでのフォーム作成用のライブラリです。
各フォームのバリデーションの設定や値の設定・取得などの操作が可能です。
また、フォームの各状態も簡単に取得することができます。
公式サイトで使い方が詳しく記載されているのが好印象です。
公式サイト：https://react-hook-form.com
インストール
npm install react-hook-formuseForm
フォームを管理するためのカスタムフックです。
引数にオプションを指定し、初期値などのオプションが設定可能です。
オプション
| 名前 | 内容 |
| mode | バリデーションを行うタイミング（初回） 初期値はonSubmit |
| reValidateMode | バリデーションを行うタイミング（2回目以降） 初期値はonChange |
| defaultValues | フィールドの初期値を設定 |
| values | フォームの値の更新値 APIのレスポンスデータを格納する際に使用する |
| resetOptions | フォームの値が更新された際の、各状態の更新有無を設定 |
| criteriaMode | バリデーションエラーの結果をどのくらい取得するか 初期値のfirstErrorは最初のエラーフィールドのエラーを取得 allは全てのエラーフィールドのエラーを取得 |
| shouldFocusError | エラーフィールドを選択状態にするか設定 |
| delayError | エラー表示の遅延設定 |
| shouldUseNativeValidation | ブラウザのバリデーションを有効にするか |
| shouldUnregister | アンマウント等によりフィールドが削除された場合の値保持の設定 |
// 初回バリデーションの実行タイミングと初期値を設定
const { register, handleSubmit } = useForm({
mode: onChange,
defaultValues: {
name: "",
name1: "",
name2: "",
})useFormのメソッド
| 名前 | 内容 |
| register | inputタグにバリデーション等 |
| control | useFormのnameをControllerに渡す |
| setValue | フィールドの値を設定する |
| getValues | フィールドの値を取得する |
| reset | フィールドの各状態を初期化する |
| watch | フィールドの値を監視する |
| trigger | フィールドのバリデーションを実行する |
| formState | フォームの状態を取得する |
| clearErrors | フィールドのエラーをクリアする |
| handleSubmit | フォームの値をオブジェクト型で渡す |
register
inputタグにバリデーション等を設定するメソッド。
最大文字数や入力形式などをオプションで設定可能。
| 名前 | 内容 |
| required | 必須入力の有無 |
| maxLength | 最大文字数 |
| minLength | 最小文字数 |
| max | 最大値（数値） |
| min | 最小値（数値） |
| pattern | 入力形式 |
| validate | 任意のバリデーション |
| valueAsNumber | 入力値が数値か |
| valueAsDate | 入力値が日付か |
| disabled | フィールドの活性非活性 |
| onChange | onChangeイベントを設定 |
| onBlur | onBlurイベントを設定 |
| value | 入力値 |
| shouldUnregister | アンマウント後の値の参照有無 |
// 必須入力で最大文字数が30文字の入力欄を作成
<input
{ ...register('name', {
required: true,
maxLength: 30,
validate: {
lessThanTen: (v) =>
parseInt(v) < 30 || '30文字以内で入力してください。',
},
}
)}
/>control
Controllerフックと同時に用いて使用し、name属性を渡すことが可能です。
registerとは異なり、バリデーションは設定できません。
今回は説明していませんが、Zodと組み合わせるとバリデーションを設定可能です。
type FormInput = {
name: string
}
const { control, handleSubmit } = useForm<FormInputs>();
// 入力値がstringで定義された
<Controller
as={TextField}
name="name"
control={control}
defaultValue=""
/>setValue
登録されているフィールドに対して、動的に値を設定するメソッドです。
第1引数にフィールドの名前、第2引数に更新する値を設定します。
また第3引数にて、フィールドの状態も設定することが可能です。
第3引数のオプション一覧
| 名前 | 内容 |
| shouldValidate | フィールドのバリデーション実行有無を設定 |
| shouldDirty | 設定値とデフォルト値の比較有無を設定 |
| shouldTouch | フィールドのタッチ状態を設定 |
// 値の更新
setValue("name", "value" )
// 値の更新 + バリデーションを実行
setValue("name", "value", { shouldValidate: true })
// 値の更新 + デフォルト値を比較
setValue("name", "value", { shouldDirty: true })
// 値の更新 + フィールドをタッチ状態に設定
setValue("name", "value", { shouldTouch: true })getValues
登録されているフィールドから値を取得するメソッドです。
再レンタリングが起動することが無く、入力変化を監視しません。
引数を指定しない場合、全てのフィールド情報をオブジェクト形式で取得します。
第1引数にフィールドを設定すると、指定したフィールドの値を取得することが可能です。
// 全てのフィールトの情報を取得
getValues()
出力：{name: "value", name1: "value", name2: "value", name3: "value", }
// 指定したフィールドの値を取得
getValues("name")
出力："value"
// 複数のフィールドの値を取得
getValues(["name1", "name2"])
出力：["value", "value"]reset
フォームやフィールドの状態をクリアするメソッドです。
引数の指定が無い場合、全ての状態・値をクリア可能です。
第1引数でresetを実行するフィールドを設定することができ、
第2引数でresetから除外したい対象をオブジェクト形式で設定可能です。
第2引数のオプション一覧
| 名前 | 内容 |
| keepErrors | フィールドのバリデーションエラーを残す |
| keepDirty | フィールドの値の変更状態を残す |
| keepDefaultValues | 入力内容に変更があったフィールドの値を残し、それ以外をリセット |
| keepValues | フィールドの値を残す |
| keepDefaultValues | useForm フックを経由して初期値を設定する isDirty等は、元々の初期値と比較される |
| keepIsSubmitted | フォームの送信状態を残す |
| keepTouched | フィールドの操作状態を残す |
| keepIsValid | フィールドのバリデーション結果を残す |
| keepSubmitCount | submitイベントが起きた回数を残す |
watch
第1引数で設定したフィールドの状態を監視し、値を返すメソッドです。
引数の設定が無い場合、全てのフィールドが監視されます。
// 特定のフィールドを監視
watch("name")
// 複数のフィールドを監視
watch(["name1", "name2"])
// 全てのフィールドを監視
watch()trigger
引数に指定したフィールドにて、バリデーションを実行するメソッドです。
引数が指定されていない場合、全てのフィールドでバリデーションを実行します。
// 特定のフィールドのバリデーションを実行
trigger("name")
// 複数のフィールドのバリデーションを実行
trigger(["name1", "name2"])
// 全てのフィールドのバリデーションを実行
trigger()formState
フォーム全体の情報を保持するオブジェクトです。
プロパティ一覧
| 名前 | 内容 |
| isDirty | フィールドの値の変更状態 いずれかのフィールドで変更がある場合、trueとなる |
| dirtyFields | 値が変更された全てのフィールド情報 変更を監視するので、useFormでの処理機の設定が必須 |
| touchedFields | 操作された全てのフィールド情報を持つオブジェクト |
| defaultValues | useFormで設定された初期値 |
| isSubmitted | フォームの送信状態 |
| isSubmitSuccessful | フォームが正常に実行されたか設定 |
| isSubmitting | フォームが送信中か設定 |
| isLoading | フィールドのバリデーション結果を残す |
| submitCount | submitイベントが起きた回数を残す |
| isValid | フォーム全体のバリデーションの結果 |
| isValidating | バリデーションが実行中か否か設定 |
| errors | バリデーションエラーのオブジェクト |
clearErrors
フォームのバリデーション結果をクリアするメソッドです。 引数にフィールド名を設定すると、指定したフィールドのエラーがクリアされます。 引数が指定されていない場合、全てのエラーがクリアされます。
// 特定のフィールドのバリデーションエラーをクリア
clearErrors("name")
// 複数のフィールドのバリデーションエラーをクリア
clearErrors(["name1", "name2"])
// 全てのフィールドのバリデーションエラーをクリア
clearErrors()handleSubmit
バリデーションが成功した場合、第1引数に設定した関数を実行します。
逆にバリデーションがNGの場合、第2引数に設定した関数が実行されます。
また、関数にラップした場合はフォームのバリデーションが成功したとき入力値をオブジェクト形式で受け渡します。
NGの場合は、何も処理が実行されません。
// 引数に関数を設定する場合（型は省略）
const onSuccess = (data) => {
console.log(data);
console.log("成功しました");
};
const onFailure = (erros) => {
console.log(errors);
console.log("失敗しました");
};
<form onSubmit={handleSubmit(onSuccess, onFailure)}>
//省略
</form>
// 関数にラップする場合
const onSubmit = handleSubmit((data) => {
console.log(data);
});最後に
今回はReact Hook Formの中の、useFormフックについて簡単にまとめてみました。
最初は大変だと思いますが、慣れてくるととても便利に感じます。
特に、バリデーションとフィールドの作成を同時に実装できるところが嬉しかったです。
公式サイトでは、デモも可能なので気になった方はご参照ください！
公式サイト：https://react-hook-form.com
以上、ここまで読んでいただきありがとうございました。
