###実装概要
checkboxを押してクエリパラメーターをつける実装です。
(typescript)JavaScriptで仕組みを組み込んでおりクエリを作成するところで、思うように行かずに時間を費やしています。引数に入ってきたクエリの名前を設定しようしたところその引数の名前を探してしますのかundefined
になってしまします。引数からクエリ名をとってきている事は確認できています。
引数からとってきた名前を使うためにはどのように設定したら良いのでしょうか。
実際のコード
OTERは配列になります。checkboxをクリックしたら上記コードのcheckListが動作します。
js
1return ( 2 <ul> 3 {OTHER.map((elm) => ( 4 <li> 5 <div> 6 <div> 7 <span> 8 <input type="checkbox" name="other" value={elm.value} onChange={() => { 9 checkList(elm, 'other');}}/> 10 {elm.label} 11 </span> 12 </div> 13 </div> 14 </li> 15 ))} 16 </ul> 17 )
引数のquery
にクリックしたcheckboxの配列の値が入ります。queryNameにother
の文字列が入ります。
js
1//下記が問題のコートです 2 3const checkList = (query:ItemType<number>,queryName:string): void => { 4 const searchQuery = search; 5 const queryBox = searchToQuery(searchQuery); 6 7 // eslint-disable-next-line no-console 8 console.log(queryName); // other 9 10 // eslint-disable-next-line no-console 11 //undefinedではなく下記のように[]にしたい 12 console.log(queryBox.queryName); //undefined 13 14 // eslint-disable-next-line no-console 15 //このように表示させたい 16 console.log(queryBox.other); //[] 17 18 };
searchToQueryの情報です。
js
1//クエリに変換 2export function searchToQuery(card:Search): { 3 [key: string]: string | string[]; 4} { 5 const params: { [key: string]: string[] | string } = { 6 other: card.other.map((item) => item.value.toString()), 7 //... 8 }; 9 10
undefinedが帰ってくるコードの引数queryName
をother
のように使用する方法をご教示ください。
よろしくお願いします。
###環境
MacOS BigSur バージョン11.6
フレームワーク:React.js
あなたの回答
tips
プレビュー