Tengo un problema con un proyecto en el que estoy trabajando donde quiero seleccionar el valor de un elemento de entrada y guardarlo. Cuando escribo mi código y lo registro en la consola para ver si obtendrá el valor correcto, siempre solo da el valor del primer valor. Tengo mis entradas en un elemento principal y tengo 5 de ellas. este es mi código:
<div className="number--container"> <input type="button" value="1" onClick={btnClicked}></input> <input type="button" value="2" onClick={btnClicked}></input> <input type="button" value="3" onClick={btnClicked}></input> <input type="button" value="4" onClick={btnClicked}></input> <input type="button" value="5" onClick={btnClicked}></input>esta es la función que maneja la recuperación de valor:
function btnClicked(){ const value= document.querySelector("input").value console.log(value) } function btnClicked(e){ const value= e.target.value; console.log(value) }En reaccionar, el elemento html no debe abordarse directamente. Si desea acceso directo, le recomendamos utilizar "ref". https://reactjs.org/docs/refs-and-the-dom.html
Normalmente, en reaccionar, nunca usamos la API de manipulación DOM de javascript simple, como querySelector;
function btnClicked(event){ const {value}= event.target; console.log(value) }