Estoy tratando de agregar un botón de reinicio a la entrada (algo así como CE en una calculadora) y tengo problemas para colocarlo dentro del código.
import { useRef } from "react"; import './App.css'; function App() { const a = useRef(0); const b = useRef(0); const plusaction = () => { console.log(a.current.value); console.log(b.current.value); alert(parseInt(a.current.value) + parseInt(b.current.value)); }; const Minusaction = () => { console.log(a.current.value); console.log(b.current.value); alert(parseInt(a.current.value) - parseInt(b.current.value)); }; const MultiplyAction = () => { console.log(a.current.value); console.log(b.current.value); alert(parseInt(a.current.value) * parseInt(b.current.value)); }; const DivideAction = () => { console.log(a.current.value); console.log(b.current.value); alert(parseInt(a.current.value) / parseInt(b.current.value)); }; return ( <div className="App"> <header className="App-header"> <h1> Enter the numbers Down</h1> <div> <input type="number" ref={a} placeholder="0" /> <input type="number" ref={b} placeholder="0" /> </div> <div className="margin"><p></p></div> <div> <button onClick={plusaction}>+</button> <button onClick={Minusaction}>-</button> <button onClick={MultiplyAction}>*</button> <button onClick={DivideAction}>/</button> </div> </header> </div> ); } export default App;¿Alguna sugerencia para mejorar y, por supuesto, agregar el botón CE? Gracias de antemano.
Debe aprender a usar useState, usar ref de esta manera no es correcto en un programa de reacción.
Una vez que haya limpiado el estado, el estado será muy trivial. Mira cualquier ejemplo de useState con campos de texto
use el gancho useState de reacción.
Cuando cambia un valor usando la función setState, el valor cambia automáticamente donde se usa el estado.
import { useState } from 'react'; import './App.css'; function App() { const [valueA, setValueA] = useState(0); const [valueB, setValueB] = useState(0); const [sum, setSum] = useState(0); const handleResult = e => { const operator = e.target.textContent; switch (operator) { case '+': setSum(valueA + valueB); return; case '-': setSum(valueA - valueB); return; case '*': setSum(valueA * valueB); return; case '/': setSum(Math.floor(valueA / valueB)); return; default: return; } }; const handleValueA = e => { const value = e.target.value; if (!value) return; setValueA(parseInt(value, 10)); }; const handleValueB = e => { const value = e.target.value; if (!value) return; setValueB(parseInt(value, 10)); }; const handleReset = () => { setValueA(0); setValueB(0); setSum(0); }; return ( <div className="App"> <header className="App-header"> <h1> Enter the numbers Down</h1> <div> <input type="number" placeholder="0" onChange={handleValueA} value={valueA} /> <input type="number" placeholder="0" onChange={handleValueB} value={valueB} /> <div className="result">{sum}</div> </div> <div className="margin"> <p></p> </div> <div> <button onClick={handleResult}>+</button> <button onClick={handleResult}>-</button> <button onClick={handleResult}>*</button> <button onClick={handleResult}>/</button> <button onClick={handleReset}>reset</button> </div> </header> </div> ); } export default App;