初心者です。
formのselectで、各選択肢に紐づくvalueとは別に、もう一つのvalueを持ちたいです。
Reactを使用していて、formはMUIを使用しております。
const valueList = [ { id: 1, age: 23, name: 'john', }, ... ] // JSX <Select ... > {valueList.map((val) => ( <MenuItem key={val.id} value={val.name}> {val.name} </MenuItem> ))} </Select>
やりたい事しては、上記の例でいうとnameとageをform値としてsubmitしたいです。
トリガーはSelect要素の中でnameを選択することで、そこでそれに紐づくageも送信したいです。
以下のようなことを試しました。
const valueList = [ { id: 1, age: 23, name: 'john', }, ... ] // JSX <Select ... > {valueList.map((val) => ( <MenuItem key={val.id} value={val.name}> {val.name} <input type='hidden' name={'age'} value={val.age} /> </MenuItem> ))} </Select>
Selectのitemの中にinputを仕込むのは出来ないのでしょうか?
この場合、ageのvalueが選択項目とズレていたりします。
【追記】
inputをselectのitemの中に入れても、submit時に全てのinputのvalueが送信される為、'選択した項目のvalue'のみを送信するというような事はできませんでした。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。