Eventos

Los eventos en los componentes de React te permiten manejar interacciones del usuario, como clics de ratón, pulsaciones de teclas y cambios de formulario. En React, los eventos se comportan de manera similar a los eventos en HTML, pero con algunas diferencias clave, como el uso de camelCase en lugar de minúsculas para los nombres de eventos. Aquí tienes una explicación detallada junto con varios ejemplos:

1. Manejo de clics: En React, puedes manejar el evento de clic utilizando la propiedad onClick en los elementos JSX. Aquí tienes un ejemplo:

   const handleClick = () => {
       console.log('¡El botón fue clickeado!');
   };
   
   const Boton = () => {
       return <button onClick={handleClick}>Haz clic aquí</button>;
   };
   

   En este ejemplo, cuando se hace clic en el botón, se ejecutará la función handleClick y se imprimirá un mensaje en la consola.

2. Pasando argumentos a un manejador de eventos: Puedes pasar argumentos a un manejador de eventos utilizando funciones anónimas. Por ejemplo:

   const handleClick = (mensaje) => {
       console.log(mensaje);
   };
   
   const Boton = () => {
       return (
           <button onClick={() => handleClick('¡El botón fue clickeado!')}>
               Haz clic aquí
           </button>
       );
   };
   

   En este ejemplo, estamos pasando el mensaje '¡El botón fue clickeado!' como argumento a la función handleClick.

3. Manejo de cambios de formulario: Puedes manejar los cambios de entrada de formulario utilizando el evento onChange en los elementos de formulario. Aquí tienes un ejemplo con un campo de entrada de texto:

   const handleChange = (event) => {
       console.log('Valor actual:', event.target.value);
   };
   
   const InputTexto = () => {
       return <input type="text" onChange={handleChange} />;
   };
   

   En este ejemplo, cada vez que se introduce texto en el campo de entrada, se ejecutará la función handleChange y se imprimirá el valor actual en la consola.

4. Evitar comportamiento predeterminado: Puedes evitar el comportamiento predeterminado de un evento utilizando el método preventDefault(). Por ejemplo:

   const handleClick = (event) => {
       event.preventDefault();
       console.log('¡El enlace fue clickeado!');
   };
   
   const Enlace = () => {
       return <a href="#" onClick={handleClick}>Haz clic aquí</a>;
   };
   

   En este ejemplo, estamos utilizando preventDefault() para evitar que el enlace se abra en una nueva página cuando se hace clic en él.

5. Eventos de ciclo de vida: En los componentes de clase, puedes utilizar métodos del ciclo de vida, como componentDidMount() y componentDidUpdate(), para manejar eventos relacionados con el montaje y la actualización del componente.

Estos son algunos ejemplos de cómo puedes manejar eventos en los componentes de React. Los eventos en React te permiten crear interfaces de usuario interactivas y receptivas que responden a las acciones del usuario.

https://www.w3schools.com/react/react_events.asp

https://fullstackopen.com/es/part1/estado_del_componente_controladores_de_eventos#control-de-eventos

https://react.dev/learn/responding-to-events