¿Cómo agregar detectores de eventos al componente envuelto en ReactJS?

React es una popular biblioteca de Javascript creada por Facebook para crear interfaces de usuario. Proporciona una forma poderosa de manipulación de DOM al introducir el concepto de DOM virtual. Se utiliza principalmente para crear aplicaciones de una sola página.

Algunas de las características clave de React.js son:

• Actuación
• Flujo de datos unidireccional
• basado en componentes
• Soporta JSX

En este artículo, aprenderemos a agregar detectores de eventos a los componentes envolventes. Antes de continuar, comprendamos qué son los detectores de eventos y cómo reaccionar y trabajar con estos detectores de eventos.

Evento: Los eventos son acciones que pueden desenstringrse por la interacción del usuario con nuestra aplicación. Por ejemplo: clic del mouse, desplazamiento, entradas de teclado, etc.

Oyentes de eventos: los detectores de eventos son las funciones que escuchan algunos eventos que suceden y se ejecutan cuando ese evento ocurre.

Manejo de eventos en React: Trabajar con eventos en React es similar a trabajar con eventos DOM. 

• En React, los eventos se escriben en el caso del camello. Por ejemplo, onclick en HTML se convierte en onClick en React.
• En React, los eventos pasamos funciones en lugar de strings.

Adición de detectores de eventos a componentes envueltos: ejecute el siguiente comando para crear una nueva aplicación React (asegúrese de tener NPM y Node instalados).

npx create-react-app gfg

Estructura del proyecto: 

 

Para el alcance de este tutorial, solo nos centraremos en el directorio src. Cree un nuevo componente llamado Wrapper.jsx en la carpeta src. Agregaremos un detector de eventos en este componente desde nuestra página de inicio a través del paso de accesorios. (Nota: los componentes personalizados no tienen eventos, aquí se tratan como accesorios normales).

Aquí crearemos un componente contenedor simple que agrega un borde a sus elementos secundarios. Aceptará dos accesorios, elementos secundarios que contendrán el contenido dentro del componente contenedor y una función de controlador de clics que funcionará como un controlador de eventos en el componente contenedor.

import React from 'react'
  
const Wrapper = ({ children, handleClick }) => {
    return (
        <div onClick={handleClick} 
            style={{ border: '1px solid green' }}>
            {children}
        </div>
    )
}
  
export default Wrapper

Primero eliminaremos todo el código repetitivo y luego importaremos el componente contenedor que acabamos de crear. Pasaremos el controlador de eventos como accesorio al contenedor. (Hemos agregado algunos estilos en línea para una mejor comprensión).

import React from "react";
import Wrapper from "./Wrapper";
const App = () => {
  
    // This function will execute whenever
    // the wrapper will be clicked.
    const onClickHandler = () => {
        alert("Wrapper got clicked!!");
    };
    return (
        <div style={{ padding: "2rem" }}>
            {/* We passed onClick handler as 
            a prop which will be added to the 
            top element of the wrapper as a
            event listener
            */}
            <Wrapper handleClick={onClickHandler}>
                <h1>Hello Geeks</h1>
            </Wrapper>
        </div>
    );
};
  
export default App;

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.

npm start

Producción: