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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

アルゴリズム

アルゴリズムとは、定められた目的を達成するために、プログラムの理論的な動作を定義するものです。

JavaScript

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

関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

React.js

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

解決済

Reactで生成したinputタグにonChangeイベントを追加したい!!

KobeanH
lep-kop

総合スコア6

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

アルゴリズム

アルゴリズムとは、定められた目的を達成するために、プログラムの理論的な動作を定義するものです。

JavaScript

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

関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

React.js

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

2回答

0評価

0クリップ

435閲覧

投稿2022/01/22 03:28

Reactで生成したinputタグにonChangeイベントを追加したいです。

やりたいことは

1.「追加する」ボタンを押すとmoneyInputという変数のinputタグが生成

2.moneyInputタグに数字が入力されたらgetMoneyというstateに値が動的に格納される

という処理です。

上記の機能を実装するために以下のコードを書いたのですが、inputに入力した途端に入力した内容がconsoleに表示されるのではなく、入力後、適当なところをマウスでクリックするとconsoleに表示されます。

どうすれば入力直後にconsoleに表示されるようになりますか?

何卒、よろしくお願いします。

import { useState } from "react"; export const Game = () => { const [getMoney, setGetMoney] = useState(null); const getMoneyInput = (e) => { setGetMoney(() => e.target.value); }; const createInput = () => { let moneyInput = document.createElement("input"); moneyInput.setAttribute("type", "number"); moneyInput.setAttribute("placeholder", "金額を入力してください"); moneyInput.setAttribute("class", "moneyInput"); moneyInput.onchange = getMoneyInput; document.querySelector(".game").appendChild(moneyInput); }; console.log(getMoney); return ( <div className="game"> <button type="button" onClick={() => createInput()}> 追加する </button> </div> ); };

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

hoshi-takanori

2022/01/22 04:16 編集

React では普通 document.createElement は使いません。
KobeanH

2022/01/22 04:52

では、今回の場合どのように実装するのでしょうか?
maisumakun

2022/01/22 06:41

「追加する」とありますが、3回押せば3つ追加されるような動作が良いのでしょうか?
KobeanH

2022/01/22 09:29

その通りです。 しかし、実は今回質問させていただいたのはとある機能を実装するための一部分でして最終的には以下のような処理にしたいです。 1.「追加する」を押すと、inputタグが2つ生成される (1つ目は金額を入力するinputタグ、2つ目は人数を入力するinputタグ) 2.金額のinputタグに「1000」、人数のinputタグに「3」を入力すると、空の配列に「1000」を3つ格納する 例えば、 空の配列array1があるとします。 let array1 = []; 次に「追加する」を1回押したとします。 すると、金額を入力するinputタグと人数を入力するinputタグの2つを生成します。 次に金額inputに「1500」、人数inputタグに「2」を入力したとすると、array1の中身は let array1 = [1500, 1500]; となります。 続いて、もう一度、「追加する」ボタンを押したとします。 すると、別の金額を入力するinputタグと人数を入力するinputタグが生成されます。 そして、新しく生成された金額inputに「2500」、人数inputに「3」を入力すると、array1の中身は let array1 = [1500, 1500, 2500, 2500, 2500] になります。 以上のような機能を実装するにはどのようなコードが正しいのでしょうか? よろしくお願いします。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

アルゴリズム

アルゴリズムとは、定められた目的を達成するために、プログラムの理論的な動作を定義するものです。

JavaScript

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

関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

React.js

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