#概要
今日はreact-hook-formを用いてフォームの作成をする際に、watchを用いてフォームに現在入力されている値を取り出す方法説明します。
#具体的な方法
- watchを宣言する
- watchを使用する
##watchを宣言する
(例)
const {
register,
handleSubmit,
watch,
} = useForm<ValuesType>({
mode: 'onChange',
reValidateMode: 'onChange',
})
このようにregisterとhandleSubmitに加えて、watchも一緒に宣言します。
ここの書き方についてはこの記事で詳しく説明しているので参照してみてください!
##watchを使用する
(例)
console.log(watch('user.first_name'))
ここでwatchの引数にはValuesTypeで指定した値を入れてください。
これによってuser.first_nameに対応したファームに書き込まれている値を取り出すことができます。
#余談
これはvalidationを自由に操作する際に用いました。
自分で用意されていないvalidationを記述する際に有用だと思います。