質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
checkbox

checkboxは、GUIのエレメントです。また、HTML<input>タグのtype属性で扱われる値を指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

809閲覧

Javascript(typescript)でクエリー名をとってきた引数を設定するとundefinedになる

Akira-WebSite

総合スコア1

checkbox

checkboxは、GUIのエレメントです。また、HTML<input>タグのtype属性で扱われる値を指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

1クリップ

投稿2021/11/20 09:42

編集2021/11/20 14:04

###実装概要
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が帰ってくるコードの引数queryNameotherのように使用する方法をご教示ください。
よろしくお願いします。
###環境
MacOS BigSur バージョン11.6
フレームワーク:React.js

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

int32_t

2021/11/20 13:54

searchToQuery() のコードを開示してください。
Akira-WebSite

2021/11/20 14:07 編集

ご連絡いただきありがとうござます。 こちら追加させていただきました。いかがでしょうか。 何かありましたらお気軽にご連絡ください。
int32_t

2021/11/25 00:47

2つ目のコード実行時に変数 search には何がはいっているのですか? 3つ目のコード searchToQuery() が何をreturnしているか不明です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問