Usare gli eventi utente

• 3 minuti

Gli eventi consentono di eseguire codice in risposta alle azioni dell'utente nell'applicazione. Poiché JSX si basa su JavaScript, XML e HTML, l'aggiunta di listener di eventi dovrebbe essere un'operazione relativamente familiare.

Si aggiungono attributi al codice HTML per indicare il nome dell'evento da gestire. Ad esempio, se si vuole usare alert per visualizzare un messaggio quando si seleziona un pulsante, è possibile usare il codice seguente:

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

Come si può intuire, è possibile creare allo stesso modo una funzione che sia in ascolto di un evento. Si aggiunge la funzione al componente. Si chiama quindi la funzione usando la stessa sintassi usata per alert.

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

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

È anche possibile passare parametri nel gestore dell'evento in base alle esigenze.

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

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