Eventos de React

Aprenda a interactuar con eventos en una aplicación React

React ofrece una forma sencilla de gestionar eventos. Prepárese para despedirse de addEventListener.

En el artículo anterior sobre el Estado viste este ejemplo:

const CurrencySwitcher = props = { return ( button onClick={props.handleChangeCurrency} Current currency is {props.currency}. Change it! /button )}

Si has estado usando JavaScript por un tiempo, esto es como los viejos controladores de eventos de JavaScript , excepto que esta vez estás definiendo todo en JavaScript, no en tu HTML, y estás pasando una función, no una cadena.

Los nombres de los eventos reales son un poco diferentes porque en React se usa camelCase para todo, por lo que onclickse convierte en onClick, onsubmitse convierte en onSubmit.

Como referencia, este es HTML de la vieja escuela con eventos de JavaScript mezclados:

button.../button

Controladores de eventos

Es una convención tener controladores de eventos definidos como métodos en la clase Componente:

class Converter extends React.Component { handleChangeCurrency = event = { this.setState({ currency: this.state.currency === '€' ? '$' : '€' }) }}

Todos los controladores reciben un objeto de evento que se adhiere, en todos los navegadores, a la especificación de eventos de interfaz de usuario del W3C .

Vincular thisen métodos

No olvides vincular los métodos. Los métodos de las clases ES6 no están vinculados de forma predeterminada. Esto significa que thisno están definidos a menos que definas los métodos como funciones de flecha:

class Converter extends React.Component { handleClick = e = { /* ... */ } //...}

al usar la sintaxis del inicializador de propiedad con Babel (habilitada de manera predeterminada en create-react-app), de lo contrario, debe vincularla manualmente en el constructor:

class Converter extends React.Component { constructor(props) { super(props) this.handleClick = this.handleClick.bind(this) } handleClick(e) {}}

Los eventos de referencia

Hay muchos eventos compatibles, aquí hay una lista resumida.Te recomendamos Todo sobre Apple, Mac e Iphone

Portapapeles

• enCopiar
• enCorte
• enPegar

Composición

• enCompositionEnd
• enCompositionStart
• enActualizarComposición

Teclado

• al presionar la tecla
• al presionar una tecla
• enTeclaArriba

Enfocar

• enfocándose
• enBlur

Forma

• en cambio
• enEntrada
• enEnviar

Ratón

• al hacer clic
• enContextMenu
• enDoubleClick
• al arrastrar
• enDragEnd
• al arrastrarEntrar
• al arrastrar y salir
• al arrastrarDejar
• enDragOver
• en ArrastreInicio
• en soltar
• con el ratón hacia abajo
• al hacer clic con el ratón
• enMouseSalir
• al mover el ratón
• enMouseOut
• al pasar el ratón por encima
• con el ratón hacia arriba

Selección

• enSeleccionar

Tocar

• onTouchCancelar
• enTouchEnd
• enTouchMover
• enTouchStart

Interfaz de usuario

• en desplazarse

Rueda del ratón

• sobre ruedas

Medios de comunicación

• enAbortar
• enCanPlay
• enCanPlayThrough
• enCambio de duración
• enVacío
• encriptado
• enTerminado
• enError
• en Datos Cargados
• onLoadedMetadata
• al iniciar la carga
• en pausa
• en juego
• enJugando
• en progreso
• enRateChange
• en Buscado
• En busca
• en estancado
• enSuspender
• Actualización a tiempo
• enCambiarVolumen
• en espera

Imagen

• en carga
• enError

Animación

• enAnimaciónInicio
• enAnimaciónFin
• enAnimaciónIteración

Transición

• enFinTransición

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase

Eventos de React

Controladores de eventosVincular thisen métodosLos eventos de referenciaTal vez te puede interesar:

programar

es

2025-01-16