el siguiente código es una calculadora de suma dinámica hecha en ReactDOM extraída de codepen https://codepen.io/tfbrown/pen/zjXvZy
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"));el problema es que quiero usar este código, pero mi proyecto está hecho en Next.js y me gustaría que este código funcione en el archivo .js sin la necesidad de un DOM html que lo haga funcional en este archivo 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 ( ) }¿Creo que esto es lo que estás buscando? (Lo estoy escribiendo en React, tal vez sea similar a Next.JS)
Solo estoy haciendo uno pequeño y simple, solo ajústelo o modifíquelo a su gusto. Calcular suma de entrada numérica
Entonces, para simplificar, simplemente cree 2 funciones llamadas changeFirstNumber , changeSecondNumber y 3 estados llamados firstNumber , secondNumber y result
Cada vez que aumentamos/disminuimos el primer número o el segundo número, se contará a sí mismo y el segundo número, luego lo actualizaremos con setState y Result hará la suma.
Luego usamos useEffect() con 3 dependencias para verificar si un estado ha cambiado/actualizado, volverá a mostrar la página nuevamente.
Código:
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> ); }