Les événements en React.js fonctionnent de manière similaire aux événements sur des éléments DOM ordinaires, mais il y a quelques différences syntaxiques :
- Les événements React sont nommés en utilisant la notation camelCase, plutôt que en minuscules.
- Avec JSX, vous passez une fonction comme gestionnaire d’événements, plutôt qu’une chaîne de caractères.
Lorsque vous définissez un gestionnaire d’événements dans une méthode d’une classe de composant, le gestionnaire d’événements a accès à cette instance grâce à la référence “this”. Cependant, en JavaScript, les méthodes de classe ne sont pas liées (“bind”) par défaut. Si vous oubliez de lier `this.handleClick` et de le passer à `onClick`, `this` sera `undefined` lorsque la fonction sera réellement appelée.
C’est pourquoi, dans les composants React définis sous forme de classes, il est courant de lier les méthodes de gestion d’événements à l’instance de la classe dans le constructeur de cette dernière :
```
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
```
Ensuite, vous pouvez l’utiliser comme gestionnaire d’événements :
```
return (
);
```
On a aussi la possibilité d’utiliser des “Public Class Fields syntax” pour éviter les problèmes de “binding”, ainsi on peut définir le gestionnaire d’événement de cette manière :
```
handleClick = () => {
console.log(‘this is:’, this);
}
render() {
return (
);
}
```
Dans cette syntaxe, le `this` est automatiquement lié.
