Reaccionar eventos

Aprenda a interactuar con eventos en una aplicación React

React proporciona una forma sencilla de gestionar eventos. Prepárate para despedirte deaddEventListener.

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 ha estado usando JavaScript durante un tiempo, esto es simplemente viejoControladores de eventos de JavaScript, excepto que esta vez está definiendo todo en JavaScript, no en su HTML, y está pasando una función, no una cadena.

Los nombres de los eventos reales son un poco diferentes porque en React usas camelCase para todo, así queonclickse convierte enonClick,onsubmitse convierte enonSubmit.

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

<button onclick="handleChangeCurrency()">...</button>

Controladores de eventos

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

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

Tech Wiki en línea!

: '€'})}}

Todos los controladores reciben un objeto de evento que se adhiere, en varios navegadores, alEspecificaciones de eventos de la interfaz de usuario del W3C.

Unirthisen métodos

No olvides vincular métodos. Los métodos de las clases de ES6 por defecto no están vinculados. Lo que esto significa es quethisno está definido a menos que defina métodos como funciones de flecha:

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

cuando se usa la sintaxis del inicializador de propiedades con Babel (habilitado por defecto encreate-react-app), de lo contrario, debe vincularlo manualmente en el constructor:

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

La referencia de eventos

Hay muchos eventos admitidos, aquí hay una lista resumida.

Portapapeles

Composición

Teclado

Atención

Formulario

Ratón

Selección

Tocar

Interfaz de usuario

Rueda de ratón

Medios de comunicación

Imagen

Animación

Transición

Descarga mi gratisReact Handbook


Más tutoriales de react:


Tech Wiki en línea!