Arbeiten mit Benutzerereignissen

Abgeschlossen

Mit Ereignissen können Sie Code als Reaktion auf Benutzeraktionen in Ihrer Anwendung ausführen. Da JSX auf JavaScript, XML und HTML basiert, sollte Ihnen das Hinzufügen von Ereignislistenern relativ vertraut erscheinen.

Sie fügen Attribute zum HTML-Code hinzu, um den Namen des Ereignisses anzugeben, das Sie verarbeiten möchten. Wenn Sie alert zum Anzeigen einer Meldung verwenden möchten, wenn beispielsweise auf eine Schaltfläche geklickt wird, können Sie den folgenden Code verwenden:

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

Wie Sie möglicherweise vermuten, können Sie auch eine Funktion erstellen, die auf ein Ereignis lauscht. Diese Funktion fügen Sie zur Komponente hinzu. Dann rufen Sie sie mithilfe derselben Syntax auf, die Sie für alert verwendet haben.

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

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

Bei Bedarf können Sie auch Parameter an den Ereignishandler übergeben.

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

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