React 數字輸入總和計算器

Question

以下代碼是從 codepen https://codepen.io/tfbrown/pen/zjXvZy中提取的用 ReactDOM 制作的動態和計算器

class NumericInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      num1: 0,
      num2: 0,
      result: 0
    };
    this._changeNum1 = this._changeNum1.bind(this);
    this._changeNum2 = this._changeNum2.bind(this);
  }
  
  _changeNum1(e) {
    if (e.target.validity.valid) {
      var newNum1 = +(e.target.value)
      this.setState({
          num1: newNum1,
          result: newNum1 + this.state.num2
        }); 
    }
  }
  
    _changeNum2(e) {
    if (e.target.validity.valid) {
      var newNum2 = +(e.target.value)
      this.setState({
          num2: newNum2,
          result: this.state.num1 + newNum2
        }); 
    }
  }

  render() {
    return (
      <div>
        <div>
          <p>first number:</p>
          <input type="number" value={this.state.num1} onChange={this._changeNum1} step="any" />
        </div>
        <div>
          <p>second number:</p>
          <input type="number" value={this.state.num2} onChange={this._changeNum2} step="any" />
        </div>
        <p>Result: {this.state.result}</p>
      </div>
    )
  }  
}  

// The following is boilderplate JavaScript
ReactDOM.render(<NumericInput />, document.getElementById("main"));

問題是我想使用此代碼，但我的項目是在 Next.js 中制作的，我想讓此代碼在 .js 文件中正常運行，而不需要 html DOM 使其在此 index.js 文件中正常運行。

import { useWeb3React } from "@web3-react/core"
import { useEffect } from "react"
import { injected } from "../components/wallet/Connectors"
import Web3 from 'web3'
import { Icon } from '@iconify/react';
import React, { useState } from "react";

export default function Home() {
 
    return (

  
    )

}

Answer 1

我想這就是你要找的嗎？ （我是用 React 寫的，可能和 Next.JS 類似）

我只是做一個簡單的，只是根據你的喜好調整或修改它。數值輸入總和計算

因此，為了簡單，只需創建 2 個名為changeFirstNumber 、 changeSecondNumber的函數和 3 個名為firstNumber 、 secondNumber和result的狀態

每次我們增加/減少第一個數字或第二個數字時，它都會自己計數，第二個數字然后我們用 setState 更新它，Result 會做 sum 的事情。

然后我們使用帶有 3 個依賴項的 useEffect() 來檢查狀態是否已更改/更新，它將再次重新渲染頁面。

代碼：

import "./styles.css";
import { useState, useEffect } from "react";

export default function App() {
  let [firstNumber, setFirstNumber] = useState(0);
  let [secondNumber, setSecondNumber] = useState(0);
  let [result, setResult] = useState(0);

  const changeFirstNumber = (e) => {
    setFirstNumber(+e.target.value);
  };

  const changeSecondNumber = (e) => {
    setSecondNumber(+e.target.value);
  };

  useEffect(() => {
    setResult(firstNumber + secondNumber);
  }, [firstNumber, secondNumber, result]);

  return (
    <div className="App">
      First Number:{" "}
      <input
        type="number"
        value={firstNumber}
        step="any"
        onChange={(e) => changeFirstNumber(e)}
      />
      <br />
      Second Number:
      <input
        type="number"
        value={secondNumber}
        step="any"
        onChange={(e) => changeSecondNumber(e)}
      />
      <br />
      Result: {result}
    </div>
  );
}