Interaktivität mit State hinzufügen

Lassen Sie uns untersuchen, wie React uns hilft, Interaktivität mit State und Event-Handlern hinzuzufügen.

Als Beispiel erstellen wir einen "Gefällt mir"-Button in Ihrer HomePage-Komponente. Fügen Sie zunächst ein Button-Element innerhalb der return()-Anweisung hinzu:

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
      <button>Like</button>
    </div>
  );
}

Ereignisse abhören

Um den Button bei einem Klick eine Aktion ausführen zu lassen, können Sie das onClick-Ereignis verwenden:

function HomePage() {
  // ...
  return (
    <div>
      {/* ... */}
      <button onClick={}>Like</button>
    </div>
  );
}

In React werden Ereignisnamen in CamelCase geschrieben. Das onClick-Ereignis ist eines von vielen möglichen Ereignissen, die Sie zur Reaktion auf Benutzerinteraktionen verwenden können. Beispielsweise können Sie onChange für Eingabefelder oder onSubmit für Formulare verwenden.

Ereignisse behandeln

Sie können eine Funktion definieren, um Ereignisse zu "behandeln", wann immer sie ausgelöst werden. Erstellen Sie vor der return-Anweisung eine Funktion namens handleClick():

function HomePage() {
  // ...
 
  function handleClick() {
    console.log("increment like count")
  }
 
  return (
    <div>
      {/* ... */}
	  <button onClick={}>Like</button>
    </div>
     )
   }

Dann können Sie die handleClick-Funktion aufrufen, wenn das onClick-Ereignis ausgelöst wird:

function HomePage() {
  // 	...
  function handleClick() {
    console.log('increment like count');
  }
 
  return (
    <div>
      {/* ... */}
      <button onClick={handleClick}>Like</button>
    </div>
  );
}

Versuchen Sie dies in Ihrem Browser auszuführen. Beachten Sie in Ihren Entwicklertools, wie die Log-Ausgabe zunimmt.

State und Hooks

React verfügt über eine Reihe von Funktionen namens Hooks. Hooks ermöglichen es Ihnen, zusätzliche Logik wie State zu Ihren Komponenten hinzuzufügen. Sie können sich State als alle Informationen in Ihrer Benutzeroberfläche vorstellen, die sich im Laufe der Zeit ändern, normalerweise durch Benutzerinteraktion ausgelöst.

Sie können State verwenden, um die Anzahl der Klicks auf den "Gefällt mir"-Button zu speichern und zu erhöhen. Tatsächlich heißt der React-Hook zur Verwaltung von State: useState()

Fügen Sie useState() zu Ihrem Projekt hinzu. Es gibt ein Array zurück, und Sie können auf diese Array-Werte innerhalb Ihrer Komponente zugreifen und sie mit Array-Destrukturierung verwenden:

function HomePage() {
  // ...
  const [] = React.useState();
 
  // ...
}

Das erste Element im Array ist der State-Wert, den Sie beliebig benennen können. Es wird empfohlen, ihn beschreibend zu benennen:

function HomePage() {
  // ...
  const [likes] = React.useState();
 
  // ...
}

Das zweite Element im Array ist eine Funktion zum Aktualisieren des Werts. Sie können die Update-Funktion beliebig benennen, aber es ist üblich, sie mit set gefolgt vom Namen der State-Variablen, die Sie aktualisieren, zu präfixieren:

function HomePage() {
  // ...
  const [likes, setLikes] = React.useState();
 
  // ...
}

Sie können auch die Gelegenheit nutzen, den Anfangswert Ihres likes-States auf 0 zu setzen:

function HomePage() {
  // ...
  const [likes, setLikes] = React.useState(0);
}

Dann können Sie überprüfen, ob der Initialzustand funktioniert, indem Sie die State-Variable in Ihrer Komponente verwenden.

function HomePage() {
  // ...
  const [likes, setLikes] = React.useState(0);
  // ...
 
  return (
    // ...
    <button onClick={handleClick}>Like({likes})</button>
  );
}

Schließlich können Sie Ihre State-Update-Funktion setLikes in Ihrer HomePage-Komponente aufrufen. Fügen wir sie in die zuvor definierte handleClick()-Funktion ein:

function HomePage() {
  // ...
  const [likes, setLikes] = React.useState(0);
 
  function handleClick() {
    setLikes(likes + 1);
  }
 
  return (
    <div>
      {/* ... */}
      <button onClick={handleClick}>Likes ({likes})</button>
    </div>
  );
}

Ein Klick auf den Button ruft nun die handleClick-Funktion auf, die wiederum die setLikes-State-Update-Funktion mit einem einzigen Argument der aktuellen Anzahl der Likes + 1 aufruft.

Hinweis: Im Gegensatz zu Props, die als erster Funktionsparameter an Komponenten übergeben werden, wird der State innerhalb einer Komponente initialisiert und gespeichert. Sie können die State-Informationen als Props an Kindkomponenten weitergeben, aber die Logik zur Aktualisierung des States sollte in der Komponente bleiben, in der der State ursprünglich erstellt wurde.

State verwalten

Dies war nur eine Einführung in State, und es gibt noch mehr, was Sie über die Verwaltung von State und Datenfluss in Ihren React-Anwendungen lernen können. Um mehr zu erfahren, empfehlen wir Ihnen, die Abschnitte Interaktivität hinzufügen und State verwalten in der React-Dokumentation durchzugehen.

Zusätzliche Ressourcen:

• State: Der Speicher einer Komponente
• Lernen Sie Ihren ersten Hook kennen
• Auf Ereignisse reagieren