recientemente aprendí Reactjs, y estoy tratando de construir una calculadora,
a continuación se muestra el código de función de App.js
import './App.css'; function App() { return ( <div className="App"> <div id="ans" className="answer">Ans = 0</div> <input type="text" placeholder="0" className="inputid" id="result"/> <hr/> {/* calculator buttons below */} <button className="opbut">+</button> <button className="opbut">-</button> <button className="calbut">0</button> <button className="calbut">1</button> <button className="calbut">2</button> <button className="calbut">3</button> <button className="opbut">%</button> <button className="ansbut">=</button> <hr/> <div className="appName">A Simple React Calculator - Jayflo</div> </div> ); } export default App;en la función onClick para cada botón, quiero que al hacer clic, muestre el valor del botón en el que se hizo clic y lo concatene con los valores restantes en el campo de texto... pero no lo obtengo, después de intentar todo lo posible soluciones que pude encontrar en línea...
Y fue debido a la actualización de reaccionar de la clase a la función, supongo, la mayoría están depreciados, supongo. y soy un poco nuevo en esto, me conecto en línea, veo soluciones antiguas...
import './App.css'; export default function App() { function handleClick(input) { let buttonText = input.target.innerText; let inputText = document.getElementById('result').value; console.log(inputText + buttonText); } return ( <div className="App"> <div id="ans" className="answer">Ans = 0</div> <input type="text" placeholder="0" className="inputid" id="result"/> <hr/> {/* calculator buttons below */} <button onClick={handleClick} className="opbut">+</button> <button onClick={handleClick} className="opbut">-</button> <button onClick={handleClick} className="calbut">0</button> <button onClick={handleClick} className="calbut">1</button> <button onClick={handleClick} className="calbut">2</button> <button onClick={handleClick} className="calbut">3</button> <button onClick={handleClick} className="opbut">%</button> <button onClick={handleClick} className="ansbut">=</button> <hr/> <div className="appName">A Simple React Calculator - Jayflo</div> </div> ); }