import {Form, InputGroup, Button} desde "react-bootstrap";
función predeterminada de exportación Acerca de () {
---------------------> quiero que esta función realice sumas pero se muestra NaN aunque parseInt...........
**function add() { let n1 = parseInt(document.getElementById("num1").value); let n2 = parseInt(document.getElementById("num2").value); document.getElementById("result").innerHTML = n1 + n2; }** return ( <> <h2>addition function</h2> <div className="row"> <div className="col-6"> <InputGroup className="mb-3" id="num1"> <Form.Control placeholder="number1" /> </InputGroup> </div> <div className="col-6"> <InputGroup className="mb-3" id="num2"> <Form.Control placeholder="number2" /> </InputGroup> </div> <div className="col-6"> <InputGroup className="mb-3" id="res"> <Form.Control placeholder="answer" /> </InputGroup> </div> <Button variant="dark" onClick={add} >Add</Button> </div> </> );}
Puede introducir tres estados para numberOne , numberTwo y para total usando useState hook como:
const [numberOne, setNumberOne] = useState(0); const [numberTwo, setNumberTwo] = useState(0); const [total, setTotal] = useState(0); al hacer clic en el botón Add , solo tiene que establecer el total como valor para setTotal como:
function add() { setTotal(numberOne + numberTwo); } Puede cambiar input a partir del number de tipo para que el usuario solo pueda ingresar el number de tipo
<Form.Control type="number" placeholder="number1" value={numberOne} onChange={(e) => setNumberOne(+e.target.value)} /> FULL CODE
function About() { const [numberOne, setNumberOne] = useState(0); const [numberTwo, setNumberTwo] = useState(0); const [total, setTotal] = useState(0); function add() { setTotal(numberOne + numberTwo); } return ( <> <h2>addition function</h2> <div className="row"> <div className="col-6"> <InputGroup className="mb-3" id="num1"> <Form.Control type="number" placeholder="number1" value={numberOne} onChange={(e) => setNumberOne(+e.target.value)} /> </InputGroup> </div> <div className="col-6"> <InputGroup className="mb-3" id="num2"> <Form.Control type="number" placeholder="number2" value={numberTwo} onChange={(e) => setNumberTwo(+e.target.value)} /> </InputGroup> </div> <div className="col-6"> <InputGroup className="mb-3" id="res"> <Form.Control placeholder="answer" value={total} /> </InputGroup> </div> <Button variant="dark" onClick={add}> Add </Button> </div> </> ); } export default function App() { return ( <div className="App"> <About /> </div> ); }