Pagina de Programación

Lección 13. Eventos Nativos, Sintéticos y Personalizados.

Para una mejor comprensión y contenido de este tema:

El ejemplo de un evento nativo y un sinthetic event.

import React, { Component } from "react";

export default class MasSobreEventos extends Component {

  handleClick = (e) => {
    
    //Evento sintetico de REACT
    console.log(e);
		
    //Impresion del elemento JSX (HTML) en la que se hace el evento
    console.log(e.target);
		
    //Evento nativo de vanila JS
    console.log(e.nativeEvent);
		
    //Impresion del elemento JSX (HTML) del evento nativo
    console.log(e.nativeEvent.target);
  }

  render () {
    return (
      <div>
        <h2>
          Mas sobre eventos
        </h2>
        <button onClick={this.handleClick}>
          Saludar
        </button>
      </div>
    )
  }
}

Los eventos NATIVOS son los eventos que podemos usar desde directamente JS.
Los eventos SINTETICOS son los eventos que REACT nos da para usar.

Hagamos un poco más complejo el evento, pasando parámetros.

Pasando parámetros a eventos._

Enviemos un mensaje al evento y que este se imprima en consola.

import React, { Component } from "react";

export default class MasSobreEventos extends Component {

  handleClick = (e, mensaje) => {
    
    //Evento sintetico de REACT
    console.log(e);
		
    //Impresion del elemento JSX (HTML) en la que se hace el evento
    console.log(e.target);
		
    //Evento nativo de vanila JS
    console.log(e.nativeEvent);
		
    //Impresion del elemento JSX (HTML) del evento nativo
    console.log(e.nativeEvent.target);

    //Impresion de mensaje
    console.log(mensaje);
  }

  render () {
    return (
      <div>
        <h2>
          Mas sobre eventos
        </h2>

        <button onClick={(e) => this.handleClick(e, "Hola, pasando parametro desde un evento")}>
          Saludar
        </button>
      </div>
    )
  }
}

Con ayuda de una Arrow function podemos obtener un parámetro de un evento.

Eventos personalizados._

Los eventos personalizados son eventos que queremos asignar a un nuevo componente desde otro.

Pongamos el siguiente código para ejemplo:

export default function Boton () {
  return (
    <button>
      Boton hecho componente
    </button>
  )
}

Creamos un nuevo componente en un nuevo archivo e importamos el componente al MasSobreEventos.

import Boton from "Boton.jsx";

Renderizamos el componente Boton dentro de MasSobreEventos y le asignamos el evento creado anteriormente (handleClick).

Agregamos al JSX el código:

<Boton onClick={(e) => this.handleClick(e, "Hola, pasando parametro desde un evento")}/>

Intentando que cada que el evento onClick se realice, se ejecute la función handleClick.

Nota: Sin embargo... ESTO NO FUNCIONARA, NUESTRA FUNCION NO SE EJECUTARA AL DAR CLICK EN EL COMPONENTE EXTERNO.

Para ello es necesario los eventos personalizados.

Lo único a hacer es pasar el evento como una props al componente.

<Boton myOnClick={(e) => this.handleClick(e, "Hola, pasando parametro desde un evento")}/>

Pasamos al componente Boton, una props llamada "myOnClick", que es una Arrow function a un evento.

También necesitamos modificar nuestro componente.

¡UNICAMENTE RECIBIENDO LAS PROPS! Y ¡ASIGNANDO COMO EVENTO onClick LA PROP!

export default function Boton (props) {
  return (
    <button onClick={props.myOnClick}>
      Boton hecho componente
    </button>
  )
}

De esta manera nuestro componente Boton ya tiene el evento.

A esto se le llama un Evento Personalizado.

LOS "ATRIBUTOS DE EVENTOS" SON PARA LAS ETIQUETAS JSX, ¡NO PARA LOS COMPONENTES!

Esto No funciona:

<Boton
  onClick={}
/>

Esto Si funciona:

<button onClick={}>
  Boton hecho componente
</button>

Recuerda, los eventos solo se asignan a los elementos JSX, a los componentes se le asignan props.

Si queremos asignar un evento a un componente, debemos pasar el evento como una props.

⬅ Anterior Menú Siguiente ➡