Réagir les événements

Apprenez à interagir avec les événements dans une application React

React fournit un moyen simple de gérer les événements. Préparez-vous à dire au revoir àaddEventListener.

Dans l'article précédent sur l'État, vous avez vu cet exemple:

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

Si vous utilisez JavaScript depuis un certain temps, cela ressemble à du vieuxGestionnaires d'événements JavaScript, sauf que cette fois, vous définissez tout en JavaScript, pas dans votre HTML, et vous passez une fonction, pas une chaîne.

Les noms d'événements réels sont un peu différents car dans React vous utilisez camelCase pour tout, donconclickdevientonClick,onsubmitdevientonSubmit.

Pour référence, il s'agit d'un code HTML old school avec des événements JavaScript mélangés dans:

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

Gestionnaires d'événements

C'est une convention d'avoir des gestionnaires d'événements définis comme des méthodes sur la classe Component:

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

Tech Wiki en ligne!

: '€'})}}

Tous les gestionnaires reçoivent un objet événement qui adhère, entre navigateurs, à laSpécification des événements de l'interface utilisateur du W3C.

Lierthisdans les méthodes

N'oubliez pas de lier les méthodes. Les méthodes des classes ES6 par défaut ne sont pas liées. Ce que cela signifie, c'est quethisn'est défini que si vous définissez des méthodes comme des fonctions fléchées:

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

lors de l'utilisation de la syntaxe d'initialisation de propriété avec Babel (activée par défaut danscreate-react-app), sinon vous devez le lier manuellement dans le constructeur:

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

La référence des événements

Il y a beaucoup d'événements pris en charge, voici une liste récapitulative.

Presse-papiers

Composition

Clavier

Concentrer

Forme

Souris

Sélection

Toucher

UI

Roulette de la souris

Médias

Image

Animation

Transition

Téléchargez mon gratuitManuel React


Plus de tutoriels de réaction:


Tech Wiki en ligne!