0
154
Vistaspasando el controlador de eventos como referencia
este es un ejercicio de codecademy. ¿Por qué es necesario pasar el controlador de eventos como referencia? por qué no puedo escribir onClick={goBack()} en lugar de onClick={goBack}
const goBack = () => { setQuestionIndex(prevQuestionIndex => prevQuestionIndex - 1); } .... <button onClick={goBack}> Go Back </button>3 Respuestas
Responde la pregunta0
Cuando está utilizando onClick={goBack()} , entonces está invocando/llamando a la función goBack y el resultado de la invocación de goBack se pasa a onClick
Demo en vivo
Pero si está utilizando como onClick={goBack} , entonces en este caso está pasando una reference a onClick , lo que significa que cuando el usuario click en el botón, invocará automáticamente la función. No tiene que invocar la función usted mismo.
1) Digamos considerar función con valor
<button onClick={fun()}> button with function reference</button> Si está pasando valor a una función, primero que nada producirá una warning en la consola como:
Warning: Expected `onClick` listener to be a function, instead got a value of `string` type. y cuando lo invocas, arrojará error como
Error Expected `onClick` listener to be a function, instead got a value of `string` type.2) Si está utilizando como
<button onClick={fun}> button with function reference</button> luego, la función fun se pasará como prop y cuando se use, haga clic en la función, esta función fun se invocará automáticamente
0
goBack es una referencia a una función, goBack() llama a esa función y devuelve el resultado.
En el caso del controlador de clics para un botón, por supuesto, desea que la función se ejecute cuando se hace clic en el botón, no cuando se procesa. Es por eso que necesita pasar la función, en lugar de llamarla (al renderizar) y pasar su resultado.
0
Si pasa la llamada a la función en lugar de la referencia, llamará a la función tan pronto como su componente se represente, la referencia está vinculada al controlador de clics, por lo tanto, cuando se activa el evento específico, llamará a la referencia.
Aquí hay un fragmento para ver esto, Sandbox