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

Question

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>
  );
};

Comments

[hoshi-takanori]

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

[lep-kop]

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

[maisumakun]

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

[lep-kop]

その通りです。
しかし、実は今回質問させていただいたのはとある機能を実装するための一部分でして最終的には以下のような処理にしたいです。

1.「追加する」を押すと、inputタグが2つ生成される
（１つ目は金額を入力するinputタグ、2つ目は人数を入力するinputタグ）

2.金額のinputタグに「1000」、人数のinputタグに「3」を入力すると、空の配列に「1000」を3つ格納する

例えば、

空の配列array1があるとします。

let array1 = [];

次に「追加する」を1回押したとします。

すると、金額を入力するinputタグと人数を入力するinputタグの２つを生成します。

次に金額inputに「1500」、人数inputタグに「2」を入力したとすると、array1の中身は

let array1 = [1500, 1500];

となります。

続いて、もう一度、「追加する」ボタンを押したとします。

すると、別の金額を入力するinputタグと人数を入力するinputタグが生成されます。

そして、新しく生成された金額inputに「2500」、人数inputに「3」を入力すると、array1の中身は

let array1 = [1500, 1500, 2500, 2500, 2500]

になります。

以上のような機能を実装するにはどのようなコードが正しいのでしょうか？

よろしくお願いします。