Registerにセットする名称によってSubmit Valuesの形が変わるのですが、
違いが今ひとつわかりにくかったので備忘録
Input Text
文字列のみの場合
Input Name
<Input {...register("firstName")} value="steve" />
<Input {...register("lastName")} value="vai" />
Submit Result
オブジェクトとなる
{ "firstName": "steve", "lastName": "vai"}
文字列.文字列
Input Name
<Input {...register("name.firstName")} value="steve" />
<Input {...register("name.lastName")} value="vai" />
Submit Result
nameに割り当てられたオブジェクトとなる
{ "name": { "firstName": "steve", "lastName": "vai" } }
数値のみ
Input Name
<Input {...register("0")} value="steve" />
<Input {...register("1")} value="vai" />
Submit Result
配列と思いきや、オブジェクトとなる
{ "0": "steve", "1": "vai" }}
文字列.数字
Input Name
<Input {...register("name.0")} value="steve" />
<Input {...register("name.1")} value="vai" />
Submit Result
配列に格納される
{ "name": [ "steve", "vai" ] }
文字列.数字 (1始まりの場合)
Input Name
1始まりの場合
<Input {...register("name.1")} value="steve" />
<Input {...register("name.2")} value="vai" />
Submit Result
配列に格納されるが、0番目は
nullとなる
{ "name": [ null, "steve", "vai" ] }
文字列.数字.文字列
Input Name
<Input {...register("name.0.firstName")} value="steve" />
<Input {...register("name.0.lastName")} value="vai" />
Submit Result
name配列の0番目にそれぞれ格納される
{ "name": [ { "firstName": "steve", "lastName": "vai" } ] }
文字列.数字.文字列
Input Name
<Input {...register("name.0.firstName")} value="steve" />
<Input {...register("name.1.lastName")} value="vai" />
Submit Result
name配列の0番目にfirstName、1番目にlastName
{ "name": [ { "firstName": "steve" }, { "lastName": "vai" } ] }
Checkbox
文字列.数字
Input Name
<Checkbox value="naruto" {...register("CheckboxGroup01.0")} checked>
<Checkbox value="Sasuke" {...register("CheckboxGroup01.1")}>
<Checkbox value="kakashi" {...register("CheckboxGroup01.2")} checked>
Submit Result
配列に格納される（未選択はfalse）
{ "CheckboxGroup01": [ "naruto", false, "kakashi" ] }
文字列.[数字]
Input Name
<Checkbox value="naruto" {...register("CheckboxGroup02.[0]")} checked>
<Checkbox value="Sasuke" {...register("CheckboxGroup02.[1]")}>
<Checkbox value="kakashi" {...register("CheckboxGroup02.[2]")} checked>
Submit Result
配列に格納される（未選択はfalse）
{ "CheckboxGroup02": [ "naruto", false, "kakashi" ]
文字列
Input Name
<Checkbox value="naruto" {...register("CheckboxGroup03")} checked>
<Checkbox value="Sasuke" {...register("CheckboxGroup03")}>
<Checkbox value="kakashi" {...register("CheckboxGroup03")} checked>
Submit Result
配列に格納される（選択されたものだけ格納される）
{ "CheckboxGroup03": [ "naruto", "kakashi" ] }
文字列
Input Name
<Checkbox value="naruto" {...register("CheckboxGroup04.a")} checked>
<Checkbox value="Sasuke" {...register("CheckboxGroup04.b")}>
<Checkbox value="kakashi" {...register("CheckboxGroup04.c")} checked>
Submit Result
オブジェクトになる
{ "CheckboxGroup04": { "a": "naruto", "b": false, "c": "kakashi" } }
以上