React Hook Form

メモ

const { register, handleSubmit } = useForm();

<form onSubmit={handleSubmit(function)}>

handleSubmitでformのonSubmitを制御

refが予約語の為、子コンポーネントのpropsにrefが使えない為、inputRefとし、inputRef={ref}の形で渡す。

下記のようなイメージ

code:親コンポーネント

const { register, handleSubmit } = useForm({

reValidateMode: 'onChange',

defaultValues: {

hogehoge: 'aaa',

},

});

const { name, ref, onChange, onBlur } = register('hogehoge');

const submitHandler = async (arg: any) => {

console.log(arg);

};

return (

<form onSubmit={handleSubmit(submitHandler)}>

<p>formテスト</p>

<Input name={name} inputRef={ref} onChange={onChange} onBlur={onBlur} />

<button type="submit">send</button>

</form>

);

リファレンスからのメモ

useFormのデフォルト値

code:js

const { register } = useForm({

mode: 'onSubmit',

reValidateMode: 'onChange',

defaultValues: {},

resolver: undefined,

context: undefined,

criteriaMode: 'firstError',

shouldFocusError: true,

shouldUnregister: true,

})

mode

バリデーションがトリガーされるタイミング

onBlur, onChange, onTouched, allが設定できる

onChange, allはパフォーマンスに大きな影響が出る可能性

reValidateMode

エラーのある入力が再度バリデーションされるタイミングを設定することが可能

デフォルトでは、入力変更時にバリデーションがトリガーされる

defaultValues

その名の通り、デフォルト値

ここに設定した値は、カスタムフック内にキャッシュされる。リセットする場合、resetを利用する

defaultValuesで設定した値は、defaultValueとして、watchに注入される

正しくrefに渡せていない場合、defaultValuesは自動設定されない

resolver

この関数を利用すると、Yup, Joi, Superstructなどの任意の外部バリデーションメソッドを実行可能

error

code: ts

// register側

const passwordRegister = register(PASSWORD_KEY, {

minLength: 8,

maxLength: 20,

required: true,

});

// jsx側の記述

{errors.nickname?.types?.required && '文字が入力されていません'}

{errors.nickname?.types?.minLength && '最小文字数を満たしていません'}

{errors.nickname?.types?.maxLength && '最大文字数を満たしていません'}

参考

React Hook Form

React Hook Formを1年以上運用してきたちょっと良く使うためのTips in ログラス（と現状の課題）

型付けを頑張る React Hook Form

React Hook Form(V7)を使って簡単にバリデーションを実装しよう！