0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

react-hook-formでフォームに入力されている値を参照する。

Posted at

#概要
今日はreact-hook-formを用いてフォームの作成をする際に、watchを用いてフォームに現在入力されている値を取り出す方法説明します。

#具体的な方法

  1. watchを宣言する
  2. 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を記述する際に有用だと思います。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?