¿Qué son los eventos sintéticos en ReactJS?

Para que funcione como una aplicación entre navegadores, React ha creado un contenedor igual que el navegador nativo para evitar la creación de implementaciones múltiples para métodos múltiples para navegadores múltiples, creando nombres comunes para todos los eventos en todos los navegadores. Otro beneficio es que aumenta el rendimiento de la aplicación ya que React reutiliza el objeto de evento.

Reúne el evento ya realizado, por lo tanto, mejora el rendimiento.

Sintaxis:

•  e.preventDefault() evita todo el comportamiento predeterminado del navegador.

e.preventDefault()

• e.stopPropagation() evita la llamada al componente principal cada vez que se llama a un componente secundario.

e.stopPropagation()

Nota: Aquí ‘e’ es un evento sintético, un objeto de navegador cruzado. Está hecho con un envoltorio alrededor del evento real del navegador. 

Algunos de los atributos son:

• burbujas: Devolver verdadero o falso indica que el evento es un evento burbujeante o no.
• cancelable: Devuelve verdadero o falso indica si el evento se puede cancelar o no.
• currentTarget: indica el elemento al que se adjunta el controlador
• defaultPrevented: Devuelve verdadero o falso, indica si el evento ha sido cancelado por preventDefault().
• eventPhase: Devuelve el número, indica la fase
• isTrusted: devuelve verdadero cuando el usuario genera el evento y falso cuando lo genera el navegador/secuencia de comandos
• type: Devuelve string, indica el tipo de evento

Nota: Los métodos como preventDefault() y stopPropagation() se analizan más adelante.

Creando la aplicación React:

Paso 1: Cree la carpeta del proyecto de reacción, abra el terminal y escriba el comando npm create-react-app nombre de la carpeta, si ya ha instalado create-react-app globalmente. Si no lo ha hecho, instale create-react-app globalmente usando el comando npm -g create-react-app o puede instalarlo localmente con npm i create-react-app .

npm create-react-app project

Paso 2: después de crear la carpeta de su proyecto (es decir, proyecto), muévase a ella usando el siguiente comando.

cd project

Estructura del proyecto:

Ejemplo 1: en App.js estamos creando un botón simple que al hacer clic muestra todas las propiedades del evento en la consola. Veremos que todas las propiedades antes mencionadas existen en la consola.

function App() {
    const onClickHandler = (e) => {
        console.log(e);
    }
    return (
        <div className="App">
            <button onClick={onClickHandler}>
                Click
            </button>
        </div>
    );
}
  
export default App;

Producción:

Ahora entenderemos las dos funciones nulas: preventDefault(), stopPropagation(),

Nota: Actualmente, e.persist() no hace nada porque ya no está agrupado.

Crearemos un componente de formulario con una etiqueta de entrada y algunos botones. Como sabemos, un botón de envío actualizará la página de forma predeterminada y la entrada volverá a ser nula, pero podemos evitar el comportamiento predeterminado utilizando el método preventDefault() , por lo que aquí estamos creando un nombre de función como handlepreventDefault que toma el evento como e y detiene el comportamiento predeterminado del botón de envío.

Para comprender, hemos tomado dos intervalos anidados denominados stopPropagation() y div interno que está anidado dentro del intervalo stopPropagation(), según el comportamiento predeterminado del navegador, cuando hacemos clic en div interno, el método de la clase principal también se activa para evitar que usemos stopPropagation() , en el tramo secundario, de modo que cuando se haga clic en él, solo active el método asociado con el tramo secundario. Aquí se han creado dos funciones handlestopPropagation e insideDiv que se activan cada vez que se hace clic en su intervalo respectivo.

Ejemplo 2:

function App() {
    const handlepreventDefault = e => {
        e.preventDefault();
        console.log("clicked on preventDefault")
    }
    const handlestopPropagation = e => {
        e.stopPropagation();
        console.log("clicked on stopPropagation")
    }
  
    const insideDiv = (e) => {
        e.stopPropagation();
        console.log("clicked on Div")
    }
    return (
        <div className="App">
            <form>
                Type anything: <input />
                <button type="submit" 
                    onClick={handlepreventDefault}>
                    preventDefault()
                </button>
                <span onClick={handlestopPropagation}>
                    stopPropagation()
                    <span onClick={insideDiv}> Inside div</span>
                </span>
                <button type="submit">submit</button>
  
            </form>
        </div>
    );
}
  
export default App;

body {
    margin: 0;
    font - family: -apple - system, BlinkMacSystemFont, 
    'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
    'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans - serif;
    -webkit - font - smoothing: antialiased;
    -moz - osx - font - smoothing: grayscale;
}
    
  code {
    font - family: source - code - pro, Menlo, Monaco, 
    Consolas, 'Courier New', monospace;
}
button, span{
    padding: 2px 10px;
    font - size: 20px;
    border: 1px solid black;
    background - color: aliceblue;
    cursor: pointer;
}

Producción: