Ereignisbehandlung in React

Einführung

In der Webentwicklung ist die Ereignisbehandlung (Event Handling) der Prozess der Reaktion auf Benutzeraktionen wie Klicks, Tastendrücke oder Mausbewegungen. React bietet eine einfache und deklarative Methode, um diese Ereignisse zu verarbeiten und Ihre Anwendungen interaktiv zu gestalten.

Das Ereignissystem von React ist eine Abstraktion über das native Ereignissystem des Browsers. Die Ereignisnamen werden in camelCase geschrieben, z. B. onClick anstelle von onclick. Sie übergeben eine Funktion als Ereignisbehandlungsroutine (Event Handler), anstatt eines Strings.

In diesem Lab lernen Sie die Grundlagen der Ereignisbehandlung in React kennen. Sie beginnen mit einem einfachen Button und fügen schrittweise Funktionalität hinzu, um Klickereignisse zu verarbeiten, Ereignisdaten abzurufen und das Standardverhalten des Browsers zu steuern.

Am Ende dieses Labs werden Sie in der Lage sein:

• Einen onClick-Ereignisbehandlungsroutine an einen Button anzuhängen.
• Eine Handler-Funktion innerhalb einer Komponente zu definieren.
• Die Handler-Funktion korrekt an das Ereignisattribut zu übergeben.
• Auf das Ereignisobjekt zuzugreifen, um Informationen über das Ereignis zu erhalten.
• Die Standardaktion des Browsers mit event.preventDefault() zu verhindern.

onClick-Attribut zum Button-Element hinzufügen

In diesem Schritt richten Sie zunächst die Entwicklungsumgebung ein und fügen dann ein onClick-Attribut zu einem Button-Element hinzu. Dies ist der erste Schritt, um ein Element in React interaktiv zu machen.

Navigieren Sie zunächst zum Projektverzeichnis, installieren Sie die notwendigen Abhängigkeiten und starten Sie den Entwicklungsserver.

Öffnen Sie ein Terminal in der WebIDE und führen Sie die folgenden Befehle nacheinander aus:

cd my-app

npm install

npm run dev -- --host 0.0.0.0 --port 8080

Nachdem Sie npm run dev ausgeführt haben, sehen Sie eine Ausgabe, die anzeigt, dass der Entwicklungsserver läuft. Sie können Ihre Anwendung nun anzeigen, indem Sie im LabEx-Interface zum Tab Web 8080 wechseln. Sie sollten einen einfachen "Click me"-Button sehen.

Fügen wir nun den Ereignisbehandlungsroutine hinzu. Öffnen Sie die Datei src/App.jsx über den Dateiexplorer auf der linken Seite der WebIDE.

Ihre Datei src/App.jsx sieht derzeit wie folgt aus:

function App() {
  return <button>Click me</button>;
}

export default App;

Um auf einen Klick zu reagieren, müssen Sie das onClick-Attribut zum <button>-Element hinzufügen. In React werden Ereignisattribute in camelCase geschrieben. Vorerst übergeben wir eine leere Inline-Arrow-Funktion.

Ändern Sie das <button>-Element in src/App.jsx wie unten gezeigt:

function App() {
  return <button onClick={() => {}}>Click me</button>;
}

export default App;

Speichern Sie die Datei. Obwohl das Klicken auf den Button noch nichts Sichtbares bewirkt, haben Sie erfolgreich einen Ereignis-Listener daran angehängt.

Handler-Funktion innerhalb der Komponente definieren

In diesem Schritt definieren Sie eine dedizierte Funktion innerhalb Ihrer Komponente, um das Klickereignis zu verarbeiten. Dies ist eine gängige Praxis, die Ihr JSX sauber und Ihre Logik organisiert hält.

Anstatt die Logik direkt im JSX onClick-Attribut zu schreiben, ist es besser, eine separate Funktion zu definieren. Erstellen wir eine Funktion namens handleClick.

Definieren Sie in Ihrer Datei src/App.jsx die Funktion handleClick innerhalb der App-Komponente, vor der return-Anweisung. Vorerst wird diese Funktion einfach eine Nachricht in die Konsole protokollieren.

Aktualisieren Sie Ihre Datei src/App.jsx mit dem folgenden Code:

function App() {
  function handleClick() {
    console.log("Button was clicked!");
  }

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

export default App;

An diesem Punkt haben Sie die Funktion handleClick definiert, aber sie ist noch nicht mit dem onClick-Ereignis des Buttons verbunden. Im nächsten Schritt lernen Sie, wie Sie diese Funktion an das onClick-Attribut übergeben.

Handler ohne Klammern an onClick übergeben

In diesem Schritt verbinden Sie die definierte handleClick-Funktion mit dem onClick-Ereignis des Buttons. Es ist sehr wichtig, die Funktionsreferenz selbst zu übergeben und nicht das Ergebnis des Funktionsaufrufs.

Um Ihre handleClick-Funktion als Ereignisbehandlungsroutine zu verwenden, müssen Sie sie innerhalb von geschweiften Klammern {} an das onClick-Attribut übergeben.

Ändern Sie das <button>-Element in src/App.jsx, um handleClick an onClick zu übergeben:

function App() {
  function handleClick() {
    console.log("Button was clicked!");
  }

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

export default App;

Beachten Sie, dass wir onClick={handleClick} schreiben und nicht onClick={handleClick()}.

• onClick={handleClick} übergibt die Funktion selbst. React ruft diese Funktion auf, wenn der Button geklickt wird.
• onClick={handleClick()} würde die Funktion sofort aufrufen, wenn die Komponente gerendert wird, und ihren Rückgabewert (der undefined ist) an onClick übergeben. Dies ist ein häufiger Fehler für Anfänger.

Testen wir es nun.

1. Speichern Sie die Datei src/App.jsx.
2. Wechseln Sie zum Tab Web 8080.
3. Öffnen Sie die Entwicklerkonsole des Browsers. Sie können dies tun, indem Sie mit der rechten Maustaste auf die Seite klicken, "Inspizieren" auswählen und dann auf den Tab "Konsole" klicken.
4. Klicken Sie auf den Button "Click me".

Sie sollten jedes Mal, wenn Sie auf den Button klicken, die Meldung "Button was clicked!" in der Konsole sehen.

Event-Objekt im Handler-Parameter abrufen

In diesem Schritt lernen Sie, wie Sie auf das Event-Objekt zugreifen können, das React automatisch an Ihre Ereignisbehandlungsroutine übergibt. Dieses Objekt enthält nützliche Informationen über die Interaktion des Benutzers.

React übergibt ein "synthetisches Event"-Objekt als erstes Argument an jede Ereignisbehandlungsroutine. Dieses Objekt ist ein Cross-Browser-Wrapper um das native Browser-Event und bietet eine konsistente API.

Um darauf zuzugreifen, müssen Sie Ihrer handleClick-Funktion einen Parameter hinzufügen. Dieser wird üblicherweise event oder e genannt. Modifizieren wir die Funktion, um diesen Parameter zu akzeptieren und ihn in der Konsole auszugeben.

Aktualisieren Sie Ihre Datei src/App.jsx:

function App() {
  function handleClick(event) {
    console.log(event);
  }

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

export default App;

Speichern Sie nun die Datei und kehren Sie zum Tab Web 8080 zurück. Stellen Sie sicher, dass Ihre Entwicklerkonsole noch geöffnet ist. Wenn Sie auf den Button klicken, sehen Sie keine einfache Zeichenkette mehr. Stattdessen wird ein SyntheticBaseEvent-Objekt in der Konsole protokolliert.

Sie können dieses Objekt in der Konsole erweitern, um seine Eigenschaften zu untersuchen. Sie finden zum Beispiel:

• event.type: Der Typ des Ereignisses (z. B. "click").
• event.target: Das DOM-Element, das das Ereignis ausgelöst hat (der <button>).

Dieses Event-Objekt ist leistungsstark und ermöglicht es Ihnen, Informationen zu lesen und das Verhalten des Ereignisses zu steuern.

Standardverhalten mit event.preventDefault() verhindern

In diesem Schritt lernen Sie, wie Sie das Standardverhalten des Browsers, das mit einem Ereignis verbunden ist, verhindern können. Dies ist eine häufige Anforderung, insbesondere bei der Verarbeitung von Formularübermittlungen.

Einige Browser-Ereignisse haben eine Standardaktion. Zum Beispiel navigiert das Klicken auf einen Link zu einer neuen Seite, und das Klicken auf einen Submit-Button innerhalb eines <form>-Elements sendet das Formular ab, was normalerweise zu einem Seiten-Neuladen führt.

Um dies zu demonstrieren, umschließen wir unseren Button mit einem <form>-Element. Standardmäßig löst das Klicken auf einen Button innerhalb eines Formulars eine Formularübermittlung aus.

Aktualisieren Sie Ihre Datei src/App.jsx, um ein <form>-Tag einzufügen:

function App() {
  function handleClick(event) {
    console.log(event);
  }

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

export default App;

Wenn Sie dies speichern und jetzt auf den Button klicken, werden Sie feststellen, dass die Seite neu geladen wird, und Sie sehen möglicherweise kurz das Konsolenprotokoll, bevor es verschwindet. Dies ist das Standardverhalten des Formulars bei der Übermittlung.

Um dies zu verhindern, können Sie event.preventDefault() in Ihrer Handler-Funktion aufrufen. Diese Methode weist den Browser an, seine Standardaktion nicht auszuführen.

Modifizieren Sie die handleClick-Funktion, um event.preventDefault() aufzurufen:

function App() {
  function handleClick(event) {
    event.preventDefault();
    console.log("Form submission prevented!");
  }

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

export default App;

Speichern Sie die Datei und versuchen Sie es erneut. Wenn Sie nun auf den Button im Tab Web 8080 klicken, wird die Seite nicht neu geladen. Sie sehen die Meldung "Form submission prevented!" konsistent in der Konsole protokolliert. Sie haben die Kontrolle über das Verhalten des Ereignisses erfolgreich übernommen.

Zusammenfassung

Herzlichen Glückwunsch zum Abschluss des Labs! Sie haben die grundlegenden Konzepte der Ereignisbehandlung in React gelernt.

In diesem Lab haben Sie geübt, wie Sie:

• Das onClick-Attribut in JSX verwenden, um auf Benutzerklicks zu reagieren.
• Ereignisbehandlungsfunktionen innerhalb Ihrer Komponenten definieren, um Ihren Code organisiert zu halten.
• Eine Funktionsreferenz korrekt an eine Event-Handler-Prop übergeben und dabei die häufige Fehlerquelle vermeiden, die Funktion während des Renderings aufzurufen.
• Auf das synthetische Event-Objekt zugreifen, das React bereitstellt und das wertvolle Informationen über die Benutzerinteraktion enthält.
• event.preventDefault() verwenden, um die Standardaktion des Browsers zu stoppen und Ihnen die volle Kontrolle über das Benutzererlebnis zu geben.

Diese Fähigkeiten sind unerlässlich für die Erstellung interaktiver und dynamischer Benutzeroberflächen mit React. Sie können dieselben Prinzipien anwenden, um andere Ereignisse wie onChange für Eingabefelder, onMouseOver für Hover-Effekte und viele mehr zu behandeln.