Utiliser des événements utilisateur

• 3 minutes

Les événements vous permettent d’exécuter du code en réponse aux actions utilisateur dans votre application. Étant donné que JSX est basé sur JavaScript, XML et HTML, l’ajout d’écouteurs d’événements semble relativement familier.

Vous ajoutez des attributs au code HTML pour indiquer le nom de l’événement que vous souhaitez gérer. Si vous voulez utiliser alert pour afficher un message quand un bouton est sélectionné, par exemple, vous pouvez utiliser le code suivant :

class Demo extends React.Component {
    render() {
        <button onClick={ () => alert('Hello, world!') }>Click me!</button>
    }
}

Comme vous le suspectez probablement, nous pouvons créer une fonction pour écouter également un événement. Nous ajoutons la fonction à notre composant. Ensuite, nous l’appelons en utilisant la même syntaxe que celle employée pour alert.

class Demo extends React.Component {
    displayMessage() {
        alert('Hello, world!');
    }

    render() {
        <button onClick={ () => displayMessage() }>Click me!</button>
    }
}

Nous pouvons également passer des paramètres au gestionnaire d’événements en fonction des besoins.

class Demo extends React.Component {
    displayMessage(message) {
        alert(message);
    }

    render() {
        <button onClick={ () => displayMessage('Clicked button!') }>Click me!</button>
    }
}