Manejo de eventos en React
en realidad es bastante sencillo
y ahora aprendamos cómo se hace.
Entonces, como puedes imaginar,
No vamos a utilizar addEventListener aquí.
porque esa es la forma imperativa de crear interfaces de usuario.
Pero aquí en React utilizamos un enfoque más declarativo.
Entonces no seleccionamos manualmente elementos DOM,
y por lo tanto, tampoco usamos addEventListener.
En lugar de eso usamos algo similar.
al detector de eventos HTML en línea.
Entonces en React hacemos algo muy similar.
al detector de eventos HTML en línea.
Básicamente escucharemos directamente
para el evento justo en el elemento donde sucederán.
Así que aquí mismo, en el botón, por ejemplo, podemos usar el
onClick prop, y luego simplemente especificamos una función aquí.
Entonces, el "Clic" es el nombre del evento.
y luego siempre le ponemos el prefijo "on".
Y luego tenemos que escribirlo en formato camello.
Mientras está en HTML en línea
Lo escribiríamos así.
Así, y luego especificando una cadena.
Entonces no hay caso de camello,
pero esto no es HTML es JSX
y por eso es ligeramente diferente
tal como aprendimos antes en la conferencia
sobre las reglas en JSX.
Entonces, nuevamente, pasaremos aquí una función.
y esa función luego será ejecutada
cada vez que se produce un clic en este elemento DOM.
En este caso, en este botón de aquí.
Entonces, creemos una función de flecha rápida aquí.
Y todo lo que voy a hacer ahora es alertar
algo,
digamos "Anterior", y esto ya debería estar funcionando.
Entonces, si hago clic aquí ahora,
entonces si, recibimos la alerta
es decir "Anterior".
y podemos hacer lo mismo en el otro botón.
Y aquí decimos "Siguiente".
Y entonces, por supuesto, aquí recibiremos un mensaje diferente.
Y eso es esencialmente todo.
Así es como manejamos los eventos a la manera de React.
sin addEventListeners,
pero en su lugar especificamos una función de escucha de eventos
directamente sobre el elemento utilizando, en este caso,
el accesorio onClick.
Pero también podría ser cualquier otro evento,
Entonces podemos especificar otro controlador de eventos.
Entonces usemos onMouseEnter.
Y ahora aquí nuevamente, necesitamos especificar una función
y es muy, muy importante entender
que no es una llamada a función, sino realmente una función.
Entonces no podemos simplemente escribir,
alerta,
"PRUEBA", por ejemplo
porque mira lo que pasa ahora mientras ahorro.
Como puede ver, inmediatamente obtuvimos esta "PRUEBA" aquí mismo,
y no cuando pasa el cursor sobre el botón.
Entonces ¿por qué es eso?
Bueno, básicamente,
tan pronto como React inicialice este componente,
Entonces, cuando llama por primera vez a esta función de aplicación,
Luego verá este código.
Y entonces aquí estamos llamando alerta.
y entonces, eso es exactamente lo que hace.
React leerá este código
y luego aquí encuentra esta llamada de función.
Y entonces llamará inmediatamente a esta función.
Pero repito, eso no es lo que queremos.
Básicamente queremos definir una función de devolución de llamada.
que será llamado más adelante.
Y ese tiempo posterior es en este caso.
cuando el mouse ingresa a este elemento.
Entonces ves que ahora no pasó nada,
pero tan pronto como el ratón pasa por aquí,
entonces se llama a esta función.
Entonces se llama a esta función y luego recibimos nuestra alerta.
De nuevo, muy, muy importante, no llames a una función aquí.
pero realmente especifica un valor de función.
De alguna manera tenemos eso de nuevo aquí,
pero no importa.
De todos modos, esto fue solo una prueba, deshagámonos de esto.
Esto fue sólo para mostrarles que podemos escuchar, por supuesto,
a algo más que un simple evento de clic.
Ahora normalmente
No definimos directamente la función del controlador de eventos.
aquí mismo en el accesorio onClick,
pero en lugar de eso creamos una función separada
y luego pase esa función aquí.
Así que hagámoslo ahora.
Y normalmente creamos esas funciones de controlador de eventos.
aquí mismo en el componente.
Eso es algo nuevo que no hemos hecho antes.
pero eso está perfectamente bien.
Podemos definir cualquier función que queramos.
aquí, justo dentro del cuerpo del componente.
Y llamemos a este mangoAnterior,
Y esta parte del controlador aquí en la función del controlador de eventos
es bastante estándar en el desarrollo de React.
Entonces verás esto todo el tiempo,
y entonces sabes inmediatamente que esta función
es una función de controlador de eventos
probablemente se esté usando en alguna parte
en el JSX de ese componente.
En este caso, se utilizará aquí mismo.
Entonces, manejeAnterior.
Y lo que queremos hacer aquí, de nuevo por ahora,
es solo para alertar a "Anterior".
Entonces, si hacemos clic aquí ahora, seguirá funcionando.
excelente. Y una vez más, es muy, muy importante notar
que aquí simplemente estamos pasando el valor de la función.
Entonces no lo llamaremos,
porque si lo estuviéramos llamando,
por otra parte, inmediatamente veríamos ese "Anterior".
Entonces React ejecutaría inmediatamente este código aquí
como lo ve.
está bien.
Pero de esta manera, solo pasamos la función.
O por supuesto, también podríamos hacer esto.
Pero claro, eso es muy redundante.
Así que ahora volvemos a tener una función aquí, ¿verdad?
Es solo una función que llama a otra,
entonces eso no es muy efectivo.
Pero a veces tendremos que hacer algo similar.
Pero por ahora, esta es la forma que tiene sentido.
Y ahora creemos rápidamente otro.
Nuevamente, esta es generalmente la forma en que lo hacemos.
Entonces, creando una función que comienza con handle,
y luego simplemente pasamos esa función aquí
en el accesorio onClick o cualquier otro accesorio que podamos usar
para manejar algún otro evento.
Muy bien, sólo para asegurarnos de que funciona,
y de hecho lo hace.
excelente. Entonces, así es como manejamos los eventos normalmente en React.
pero por supuesto,
Ahora realmente queremos que suceda algo significativo aquí.
y en particular,
Básicamente queremos cambiar este valor de paso aquí, ¿verdad?
Y para eso necesitamos algo llamado estado.
Ahora bien, ya hemos tocado el estado muchas veces.
pero ahora es el momento de aprender realmente qué es el estado
y luego cómo podemos usarlo en la práctica.