Reaktion auf Ereignisse

Einführung

Willkommen zur React-Dokumentation! In diesem Lab erhalten Sie eine Einführung in die Reaktion auf Ereignisse.

Reaktion auf Ereignisse

Das React-Projekt wurde bereits in der VM bereitgestellt. Im Allgemeinen müssen Sie nur Code in App.js hinzufügen.

Installieren Sie die Abhängigkeiten mit dem folgenden Befehl:

npm i

React ermöglicht es Ihnen, Ereignishandler zu Ihren JSX hinzuzufügen. Ereignishandler sind Ihre eigenen Funktionen, die in Reaktion auf Interaktionen wie Klicken, Hovern, Fokussieren von Formularfeldern usw. ausgelöst werden.

Um einen Ereignishandler hinzuzufügen, definieren Sie zunächst eine Funktion und übergeben Sie sie dann als Prop an das passende JSX-Tag. Beispielsweise ist hier ein Button, der noch nichts tut:

// App.js
export default function Button() {
  return <button>I don't do anything</button>;
}

Sie können es so gestalten, dass es eine Nachricht anzeigt, wenn ein Benutzer klickt, indem Sie die folgenden drei Schritte ausführen:

1. Deklarieren Sie eine Funktion namens handleClick innerhalb Ihrer Button-Komponente.
2. Implementieren Sie die Logik innerhalb dieser Funktion (verwenden Sie alert, um die Nachricht anzuzeigen).
3. Fügen Sie onClick={handleClick} zum <button>-JSX hinzu.

export default function Button() {
  function handleClick() {
    alert("You clicked me!");
  }

  return <button onClick={handleClick}>Click me</button>;
}

Sie haben die handleClick-Funktion definiert und sie als Prop an <button> übergeben. handleClick ist ein Ereignishandler. Ereignishandlerfunktionen:

Werden normalerweise innerhalb Ihrer Komponenten definiert. Haben Namen, die mit handle beginnen, gefolgt vom Namen des Ereignisses.

Um das Projekt auszuführen, verwenden Sie den folgenden Befehl. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

npm start

Konventionell wird es üblich sein, Ereignishandler als handle gefolgt vom Ereignisnamen zu benennen. Sie werden oft onClick={handleClick}, onMouseEnter={handleMouseEnter} usw. sehen.

Alternativ können Sie einen Ereignishandler in der JSX inline definieren:

<button onClick={function handleClick() {
  alert('You clicked me!');
}}>

Oder kürzer mit einer Arrow-Funktion:

<button onClick={() => {
  alert('You clicked me!');
}}>

Alle diese Schreibweisen sind äquivalent. Inline-Ereignishandler sind für kurze Funktionen praktisch.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab "Reaktion auf Ereignisse" abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.