hola, me pregunto por qué solo funcionan las funciones normales como las siguientes y las funciones de flecha no.
const Form = () =>{ const [text, setText] = useState(""); const handle=(e)=>{ setText(e.target.value); } const alertText = (e) =>{ console.log(text); alert(text); } return( <> <input onChange={handle}></input> <button onClick={alertText}>submit</button> <h1>{text}</h1> </> )} usar funciones de flecha como <input onChange={()=>handle}> no funciona en absoluto y no tengo idea de cuál es la diferencia entre ellas.
Bueno, eso es porque si usa una función de flecha en el elemento, debe llamarlo así:
<input onChange={(e)=>handle(e)}>componente espera onChange como una función, esa función se llamará cuando el usuario cambie el valor de la entrada.
NOTA: es sintácticamente correcto, pero la función handle no se ejecutará.
Cuando tu lo hagas
<input onChange={handle}></input> // it's equivalent to <input onChange={(e)=>{ setText(e.target.value); }}></input>pero cuando lo haces
<input onChange={()=>handle}></input> // it's equivalent to <input onChange={(e) => ()=>{ setText(e.target.value);}}></input>Tu puedes hacer:
<input onChange={(e)=>handle(e)}>No está pasando el evento a la función de manejo