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