El manejo de eventos en React es similar al manejo de eventos en JavaScript nativo, pero con diferencias importantes en la sintaxis y el enfoque. React utiliza un sistema de delegación de eventos que mejora el rendimiento y la compatibilidad entre navegadores.
Los eventos son acciones o interacciones del usuario con la interfaz de una aplicación, como hacer clic en un botón, mover el ratón o escribir en un campo de texto. React gestiona estos eventos mediante su propio sistema, que encapsula los eventos nativos del navegador.
En React, los eventos se manejan pasando funciones como valores de atributos en JSX. Los nombres de los eventos utilizan camelCase en lugar de kebab-case, y los manejadores de eventos son funciones en lugar de cadenas de texto.
function App() {
const handleClick = () => {
alert('¡Botón clicado!');
};
return <button onClick={handleClick}>Haz clic</button>;
}
React admite una amplia variedad de eventos que puedes manejar en tus componentes. Aquí tienes algunos de los más comunes:
onClick: Se activa al hacer clic en un elemento.onMouseEnter: Se activa al mover el puntero sobre un elemento.onMouseLeave: Se activa al mover el puntero fuera de un elemento.onKeyDown: Se activa al presionar una tecla.onKeyUp: Se activa al soltar una tecla.onKeyPress: (Obsoleto) Similar a onKeyDown, pero menos preciso.