React Formulare Grundlagen

Einführung

In der Webentwicklung sind Formulare unerlässlich, um Benutzereingaben zu sammeln. In React unterscheidet sich die Handhabung von Formulardaten etwas von traditionellem HTML. Der empfohlene Ansatz ist die Verwendung einer Technik namens "Controlled Components" (kontrollierte Komponenten).

Bei kontrollierten Komponenten werden die Formulardaten vom Zustand der React-Komponente verwaltet. Dies macht den React-Zustand zur "Single Source of Truth" (einzigen Quelle der Wahrheit), wodurch Sie Benutzereingaben auf vorhersagbare Weise verwalten, validieren und darauf reagieren können.

In diesem Lab bauen Sie ein einfaches Formular mit einem einzelnen Texteingabefeld und einem Submit-Button. Sie lernen, wie Sie:

• Formularelemente in JSX erstellen.
• Den useState-Hook verwenden, um den Wert des Eingabefeldes zu verwalten.
• Benutzereingaben mit dem onChange-Ereignis verarbeiten.
• Formularübermittlungen mit dem onSubmit-Ereignis verarbeiten.

Am Ende dieses Labs werden Sie ein solides Verständnis der Grundlagen von React-Formularen haben.

Eingabeelement mit onChange-Attribut erstellen

In diesem Schritt erstellen wir die grundlegende Struktur unseres Formulars. Dazu gehören ein Formularelement und ein Texteingabefeld. Wir fügen auch das onChange-Attribut hinzu, das entscheidend für die Verfolgung von Änderungen am Wert des Eingabefeldes ist.

Zuerst bereiten wir unsere Entwicklungsumgebung vor. Wir müssen die Projekt-Abhängigkeiten installieren und den Entwicklungsserver starten.

Öffnen Sie ein Terminal im WebIDE und führen Sie die folgenden Befehle nacheinander aus. Stellen Sie sicher, dass Sie sich im Verzeichnis ~/project/my-app befinden.

cd my-app
npm install

Dieser Befehl installiert alle notwendigen Pakete, die in package.json definiert sind.

Starten Sie nun den Entwicklungsserver:

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

Navigieren Sie als Nächstes im Dateiexplorer auf der linken Seite zum Verzeichnis my-app/src und öffnen Sie die Datei App.jsx. Wir werden diese Datei ändern, um unser Formular hinzuzufügen.

Ersetzen Sie den Inhalt von App.jsx durch den folgenden Code. Wir fügen ein <form>-Tag und darin ein <input>-Element hinzu. Das onChange-Attribut wird dem Eingabefeld hinzugefügt, das später zur Verarbeitung von Wertänderungen verwendet wird.

import "./App.css";

function App() {
  return (
    <form>
      <h1>React Form</h1>
      <label>
        Enter your name:
        <input type="text" onChange={() => {}} />
      </label>
    </form>
  );
}

export default App;

Nachdem Sie die Datei gespeichert haben, wechseln Sie zum Tab Web 8080 in der LabEx-Oberfläche. Sie sollten ein einfaches Formular mit einem Texteingabefeld sehen. Wenn Sie die Änderungen nicht sehen, versuchen Sie, den Tab zu aktualisieren. An diesem Punkt bewirkt die Eingabe in das Eingabefeld nichts, aber wir haben die grundlegende Struktur vorhanden.

Änderungen mit einer Funktion zur State-Aktualisierung behandeln

In diesem Schritt machen wir das Eingabefeld interaktiv. Dazu müssen wir seinen Wert im Zustand der Komponente speichern. Wir verwenden den useState-Hook, um eine Zustandsvariable und eine Funktion zu deren Aktualisierung zu erstellen.

Zuerst müssen wir den useState-Hook aus der 'react'-Bibliothek importieren. Dann deklarieren wir eine Zustandsvariable, nennen wir sie name, um den Wert des Eingabefeldes zu speichern.

Als Nächstes erstellen wir eine Funktion namens handleChange. Diese Funktion wird jedes Mal ausgelöst, wenn der Benutzer in das Eingabefeld tippt. Innerhalb dieser Funktion verwenden wir die von useState bereitgestellte setName-Funktion, um unseren name-Zustand mit dem aktuellen Wert des Eingabefeldes zu aktualisieren, auf den wir über event.target.value zugreifen können.

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

import { useState } from "react";
import "./App.css";

function App() {
  // Create a state variable 'name' and a function 'setName' to update it
  const [name, setName] = useState("");

  // Define the event handler function
  const handleChange = (event) => {
    setName(event.target.value);
  };

  return (
    <form>
      <h1>React Form</h1>
      <label>
        Enter your name:
        {/* Connect the handler to the onChange event */}
        <input type="text" onChange={handleChange} />
      </label>
    </form>
  );
}

export default App;

Wenn Sie nun in das Eingabefeld tippen, wird die Funktion handleChange aufgerufen und der name-Zustand wird bei jedem Tastendruck aktualisiert. Obwohl Sie die Änderung noch nicht auf dem Bildschirm sehen können, verfolgt der Zustand der Komponente nun den Wert des Eingabefeldes. Dies ist die erste Hälfte der Erstellung einer kontrollierten Komponente.

input value-Attribut auf State-Wert setzen

In diesem Schritt vervollständigen wir das "Controlled Component"-Muster. Eine kontrollierte Komponente ist eine, bei der der Wert des Eingabefeldes durch den React-Zustand gesteuert wird, wodurch der Zustand zur "Single Source of Truth" wird.

Um dies zu erreichen, müssen wir das value-Attribut des <input>-Elements direkt an unsere name-Zustandsvariable binden. Dies schafft eine Zwei-Wege-Datenbindung:

1. Der Benutzer tippt, was onChange auslöst, das den Zustand aktualisiert.
2. Die Zustandsaktualisierung bewirkt ein erneutes Rendern, und der value des Eingabefeldes wird auf den neuen Zustandswert gesetzt.

Dadurch wird sichergestellt, dass die Benutzeroberfläche immer mit dem Zustand der Komponente synchronisiert ist.

Ändern Sie das <input>-Element in Ihrer App.jsx-Datei, um das value-Attribut hinzuzufügen, wie folgt:

import { useState } from "react";
import "./App.css";

function App() {
  const [name, setName] = useState("");

  const handleChange = (event) => {
    setName(event.target.value);
  };

  return (
    <form>
      <h1>React Form</h1>
      <label>
        Enter your name:
        {/* Bind the input's value to the state */}
        <input type="text" value={name} onChange={handleChange} />
      </label>
    </form>
  );
}

export default App;

Nachdem Sie die Datei gespeichert haben, kehren Sie zum Tab Web 8080 zurück. Das Formular wird gleich aussehen, ist aber nun eine vollständig kontrollierte Komponente. Die Anzeige des Eingabefeldes wird nun direkt von der name-Zustandsvariable in Ihrer React-Komponente gesteuert.

Submit-Button mit onClick-Handler hinzufügen

Ein Formular ist ohne eine Möglichkeit zur Absendung nicht vollständig. In diesem Schritt fügen wir einen Submit-Button und einen Event-Handler hinzu, um die Formularabsendung zu verarbeiten.

Der Standard- und zugänglichste Weg, Formularabsendungen in React zu handhaben, ist die Verwendung des onSubmit-Events am <form>-Element selbst. Dies stellt sicher, dass das Formular durch Klicken auf den Button oder durch Drücken der "Enter"-Taste in einem Eingabefeld abgesendet werden kann.

Zuerst fügen wir einen <button> mit type="submit" in unser Formular ein. Dann erstellen wir eine neue Handler-Funktion, handleSubmit, und weisen sie dem onSubmit-Attribut des <form>-Elements zu.

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

import { useState } from "react";
import "./App.css";

function App() {
  const [name, setName] = useState("");

  const handleChange = (event) => {
    setName(event.target.value);
  };

  // Create the submit handler function
  const handleSubmit = (event) => {
    // We will add more logic here in the next step
    console.log("Form was submitted");
  };

  return (
    // Attach the handler to the form's onSubmit event
    <form onSubmit={handleSubmit}>
      <h1>React Form</h1>
      <label>
        Enter your name:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      {/* Add a submit button */}
      <button type="submit">Submit</button>
    </form>
  );
}

export default App;

Wenn Sie nun zum Tab Web 8080 wechseln, sehen Sie einen "Submit"-Button. Wenn Sie darauf klicken, stellen Sie möglicherweise fest, dass die Seite schnell neu geladen wird. Dies ist das Standardverhalten des Browsers für die Formularabsendung, das wir im letzten Schritt behandeln werden.

Submit-Standardverhalten verhindern und Formulardaten protokollieren

In diesem letzten Schritt vervollständigen Sie die Funktionalität des Formulars. Wie Sie bemerkt haben, führt das Klicken auf den Submit-Button zu einem vollständigen Seiten-Neuladen. In einer Single-Page Application (SPA) wie einer mit React erstellten möchten wir Formularabsendungen mit JavaScript verarbeiten, ohne die Seite neu zu laden.

Dazu müssen wir event.preventDefault() in unserer handleSubmit-Funktion aufrufen. Das event-Objekt wird automatisch an den Event-Handler übergeben, und diese Methode stoppt die Standardaktion des Browsers.

Sobald wir das Standardverhalten verhindert haben, können wir auf die übermittelten Daten aus unserem Zustand zugreifen und etwas damit tun, z. B. dem Benutzer eine Benachrichtigung anzeigen.

Aktualisieren wir die handleSubmit-Funktion in App.jsx, um diese Logik zu implementieren.

import { useState } from "react";
import "./App.css";

function App() {
  const [name, setName] = useState("");

  const handleChange = (event) => {
    setName(event.target.value);
  };

  const handleSubmit = (event) => {
    // Prevent the default form submission behavior
    event.preventDefault();
    // Show an alert with the submitted name
    alert(`A name was submitted: ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <h1>React Form</h1>
      <label>
        Enter your name:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default App;

Speichern Sie die Datei. Gehen Sie nun zum Tab Web 8080, geben Sie einen Namen in das Eingabefeld ein und klicken Sie auf den "Submit"-Button. Sie sollten eine Benachrichtigung mit dem eingegebenen Namen sehen, und die Seite wird nicht neu geladen.

Herzlichen Glückwunsch! Sie haben erfolgreich ein grundlegendes kontrolliertes Formular in React erstellt.

Zusammenfassung

In diesem Lab haben Sie die grundlegenden Prinzipien der Formularbehandlung in React anhand des "Controlled Components"-Musters gelernt.

Sie haben erfolgreich:

• Ein Formular mit einem Eingabefeld und einem Submit-Button mithilfe von JSX erstellt.
• Den useState-Hook verwendet, um die Daten des Formulars im Zustand der Komponente zu verwalten.
• Einen onChange-Event-Handler implementiert, um den Zustand zu aktualisieren, während der Benutzer tippt, und so die Benutzeroberfläche und den Zustand synchron zu halten.
• Die Formularabsendung mit einem onSubmit-Event-Handler behandelt und den standardmäßigen Seiten-Neuladevorgang des Browsers durch die Verwendung von event.preventDefault() verhindert.
• Auf die Formulardaten aus dem Zustand bei der Absendung zugegriffen.

Diese Konzepte sind die Bausteine für die Erstellung komplexerer und interaktiverer Formulare in Ihren React-Anwendungen. Sie können dieses Wissen nun anwenden, um Formulare mit mehreren Eingaben, verschiedenen Eingabetypen und Validierungslogik zu erstellen.