El manejo de eventos en HTML y React son diferentes entre sí en términos de sintaxis y algunas reglas. La razón detrás de esto es que React funciona con el concepto de DOM virtual, por otro lado, el HTML tiene acceso al DOM real todo el tiempo. Vamos a ver cómo podemos agregar los eventos en HTML y cómo React difiere en el manejo de eventos.
En HTML , estamos escribiendo directamente el código para Real DOM, por lo que para que Real DOM sepa que nos estamos refiriendo a la función o método de JavaScript, debemos especificar «( )» al final de la string. Si no queremos seguir con este enfoque, hay un enfoque más usando javascript. Necesitamos usar addEventLisener para especificar eventos y oyentes.
Ambos métodos funcionan bien, hemos hecho un onclick usando el primer método y otro usando addEventlistener que saludan al usuario cada vez que el usuario hace clic en eso. Como puede ver, el primer botón no tiene ninguna identificación, estamos especificando el evento usando el primer método que es «onclick». Es claramente visible que proporcionamos «saludo()» como una string y también proporcionamos el paréntesis al final (ver la primera etiqueta de script). El segundo método usa addEventListener, hemos especificado el evento «Click» y dado una devolución de llamada, también podemos dar el nombre del método. Ver este artículo.
Ejemplo:
index.htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<style>
.btn {
padding: 20px;
background-color: blueviolet;
color: white;
font-size: 20px;
}
</style>
<!-- script for onclick method -->
<script>
var greet = function () {
window.alert("hello onclick event sent me");
};
</script>
</head>
<body>
<button class="btn" onclick="greet()">
Greet me using "onclick"
</button>
<button id="b1" class="btn">
Greet me using addEventListener
</button>
<!-- Script for addevnetListner -->
<script>
var button = document.getElementById("b1");
button.addEventListener("click", () =>
window.alert("hello addevnetlistner sent me")
);
</script>
</body>
</html>
Producción:
Escucha de eventos HTML
En Reaccionar . usamos el concepto de DOM virtual, por lo que todos los eventos deben especificarse en el momento de crear el componente. Aquí, en el archivo App.js, hemos definido una aplicación componente, que tiene un botón. Hemos utilizado el evento «onClick» y proporcionamos un nombre de método en lugar de una string. Al igual que en JSX, especificamos javascript en «{ }», por eso el nombre del método está en { }.
Puede crear la aplicación React usando el siguiente comando:
npx create-react-app nameoftheapp
directorio de archivos de reacción
Ejemplo:
App.js
import React from 'react'
export default function App() {
const greet = () => {
window.alert("onClick in React sent me");
}
return (
<div>
<button className="btn" onClick={greet}>
Greet me using onClick React
</button>
</div>
)
}
Puede ejecutar su aplicación usando el siguiente comando:
npm start
Producción:
Manejo de eventos de reacción
- En HTML, especificamos eventos en etiquetas html como onclick, onsubmit, etc. y pasamos la string que contiene el paréntesis al final.
- En html, también podemos agregarles un epílogo usando javascript externo usando addEventListener.
- En React, especificamos el evento al momento de crear nuestro componente.
- usamos la convención camel case en React, es decir, onClick, onSubmit.
- En React, los vinculamos usando el nombre del método solo como onClick={greet}.
- addEventListener no se puede usar en el componente React.
Estas son algunas diferencias clave en el manejo de eventos, las veremos en detalle con los ejemplos.
| En HTML | En ReactJS |
|---|---|
| especificamos el evento usando «onclick», «onsubmit», que es la convención normal. | Especificamos el evento usando «onClick», «onSubmit» del mismo modo, que es la convención camel case. |
| Vinculamos o proporcionamos el oyente en forma de string. | Vinculamos o proporcionamos el oyente en forma de nombre de función o nombre de método como una variable. |
| La string que le pasamos al oyente debe tener «( )» al final para que funcione. | Se supone que solo debemos pasar el nombre del método y nada más. React puede determinar que tiene que ejecutar este método. |
| Podemos agregar un detector de eventos en cualquier momento usando javascript externo. | Tenemos que especificar todos los Eventos en el momento de crear el componente. |
Referencias: https://www.geeksforgeeks.org/javascript-addeventlistener-with-examples/
Publicación traducida automáticamente
Artículo escrito por jymnjogiya y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA