概要
Reactでフォームの実装をする際にバリデーションなど簡単に実装できる、react-hook-formというものがあります。使い方の概要などは、@akihiro_FEさんがReact-hook-formで簡単にバリデーションフォーム作るという記事で紹介されています。
今回はフォームで入力する値の登録処理の詳細について、少し調べてみたのでメモ書きを残しておきます。
registerメソッドについて
ドキュメントのフィールドを登録するにあるとおり、入力項目のref属性にregisterをセットすることでフォームフィールドの値の収集とバリデーションが実現できます。そして、onSubmitに指定するメソッドでregisterにセットした値を取得できます。React Hook Formを使うの記事の「送信の設定」の項にある通り、「refにregisterが設定された要素のvalueが,その要素のnameがプロパティとなり,dataにオブジェクトとして渡される」仕組みとなっています。
値登録の処理
では、submit時に取得できる値の登録はどのような処理を行っているのでしょうか。参考になるのはドキュメントのrefへのアクセスが出来ない場合は？です。ref属性でのregisterメソッドを使用しない（もしくはできない）場合は、事前にregisterメソッドでプロパティ名を登録の上、useFormで設定されているsetValueメソッドで個別に値が設定できます。
では、そのsetValueでは何をやっているかというと、こちらのドキュメントにある通り、「formStateはinputのnameをtouchedにプッシュ」とあります。最終的な状態の管理はformStateで行われていて、formStateのtouchedに「操作された全てのinputのnameの配列」が格納されています。