【React】入力した値で残高を増減できるようにしたい

Question

解決済

1

回答数

【React】入力した値で残高を増減できるようにしたい

2021/12/12 00:13更新

初心者 react

Reactで、残高アプリを作成しています。下記の実装の仕方がわからず、詰まっています。何方かアドバイスをお願いします。

期待する動作 テキストに数字を入力し、増減ボタンを押したら、残高が増減するようにしたい。

試したこと ① 『countUp』『countDown』で、一定の数字の増減の実装はできた。 ② 電卓アプリのドキュメンを見て、実際に作成したが、電卓機能はできたが、空欄に数字を入れて残高を増減させる実装ができなかった。

//count 送金者の残高
//num　送金者の入金及び出勤額

import React, { useState } from "react";

function App() {
  const [count, setCount] = useState("");

  const onCountUp = () => {
    setCount(count + { num });
  };
  const onCountDown = () => {
    setCount(count - { num });
  };

  return (
    <div className="App-header">
      <div className="Balance-list">
        <h2>送金者残高 : {count} 円 </h2>
        <input type={num} /> + <input type={count} /> = <span>{count}</span>
        <button onClick={onCountUp}>Increment</button>
        <button onClick={onCountDown}>Decrement</button>
      </div>
    </div>
  );
}

export default App;

確認したいことがあったら質問者に確認してヤァ！

回答

ノダ

2021/12/12

ベストアンサー

返信

geno

未経験からフロントエンジニアへの転職を目指し、プログラミングを勉強中。 2023年より受託開発企業にて働く。

Answer 1

こんな感じになると思います

function App() {
  const [count, setCount] = useState(0);
  const [num, setNum] = useState(100);

  const onCountUp = () => {
    setCount(count + num);
  };

  const onCountDown = () => {
    setCount(count - num);
  };

  return (
    <div className="App-header">
      <div className="Balance-list">
        <h2>送金者残高 : {count} 円 </h2>
        <input
          value={count}
          onChange={(e) => setCount(Number(e.target.value))}
        />{" "}
        +
        <input value={num} onChange={(e) => setNum(Number(e.target.value))} />
        <button onClick={onCountUp}>Increment</button>
        <button onClick={onCountDown}>Increment</button>
      </div>
    </div>
  );
}

inputのtypeではなくvalueに値を入れます。 inputの変更でuseStateのsetterで値を更新するようにします。

以下に動作サンプルを置いておきます https://codesandbox.io/embed/react-hooks-playground-forked-q60zb?fontsize=14&hidenavigation=1&theme=dark