はじめに
業務でreact-hook-formのwatchを使用している際、nameプロパティの付け方について混乱した経験があります。nameプロパティはHTML一般において重要な概念ですが、react-hook-formでの使い方に着目して記事にしました。
この記事は個人的なアウトプットを目的として作成したものです。そのため、誤った情報や不足している内容が含まれている可能性があります。もし間違いや気になる点がございましたら、ぜひご指摘いただけますと幸いです。
watchの基本
react-hook-formは、nameをキーとしてフォームフィールドの状態を管理します。
そのため、watchメソッドで特定のフィールドを監視する際には、対応するnameプロパティを正しく指定する必要があります。nameが異なるフィールドの値を取得することはできません。
今回の記事では、複数のチェックボックスやテキストボックスのnameの扱いに焦点を当てます。
nameの付け方
固有の場合
基本的には、nameはフィールドごとに固有である必要があります。以下のような例では、異なるnameを使用することで、各フィールドの値が個別に管理されます。
<input type="text" {...register("firstName")} />
<input type="text" {...register("lastName")} />
しかし、同じnameを複数の`inputPに設定すると問題が発生します。
<input type="text" {...register("name")} />
<input type="text" {...register("name")} />
このように書いた場合、HTMLの仕様上、同じname属性を持つ要素の値は最後の要素が優先されます。つまり、2つ目のinputの値が優先され、最初のinputの値は上書きされます。これはテキストボックスでは複数の値を格納できないためです。
この挙動はreact-hook-formではなく、HTMLの仕様によるものです。
共通の場合
チェックボックスやラジオボタンのように複数のフィールドをまとめて管理したい場合、nameを共通に設定します。react-hook-formでは、同じnameを持つチェックボックスの選択状態を配列として扱います。
const values = watch("fruits");
<input type="checkbox" value="りんご" {...register("fruits")} />
<input type="checkbox" value="ばなな" {...register("fruits")} />
console.log(values) //["りんご", "ばなな"]出力結果
このように、複数のチェックボックスを一つのnameでグループ化することで、選択された値をまとめて取得できます。これにより、状態管理が簡潔になります。
一方、チェックボックスが独立した状態を持つ場合（例: 個別のonChange処理が必要な場合など）は、固有のnameを設定します。
<input type="checkbox" value="りんご" {...register("apple")} />
<input type="checkbox" value="ばなな" {...register("banana")} />
このようにすることで、各チェックボックスを個別に管理することができます。
# 終わりに
nameプロパティはフォーム要素を識別するための基本的な要素ですが、使用する状況によって設計が変わります。今回の件でreact-hook-formや一般的なHTMLフォームにおけるnameの役割についての理解が深まりました。引き続き学習していきたいと思います。
参考