React Academy · Lektion

Erste Schritte mit React Hook Form

Installieren Sie RHF, rufen Sie useForm auf, registrieren Sie Eingaben und verarbeiten Sie das Absenden von Formularen.

Erste Schritte mit React Hook Form ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Willkommen

In dieser Lektion installieren Sie React Hook Form, rufen useForm auf, registrieren Eingabefelder und verarbeiten Formularübermittlungen, ohne einzelne Zustandsvariablen verwalten zu müssen.

Warum React Hook Form?

Traditionelle kontrollierte Formulare in React erfordern pro Feld ein useState und pro Eingabe ein onChange. React Hook Form (RHF) verwaltet dies intern mithilfe unkontrollierter Eingaben und bietet Ihnen dadurch eine einfachere API mit weniger erneuten Renderdurchläufen.

Installation

Installieren Sie das Paket. Für die grundlegende Verwendung sind keine zusätzlichen Peer-Abhängigkeiten erforderlich.

npm install react-hook-form

useForm-Hook

Rufen Sie useForm() auf, um die Funktion register, den Wrapper handleSubmit und formState zu erhalten. Dies sind die drei grundlegenden Bestandteile, die Sie für jedes Formular benötigen.

import { useForm } from 'react-hook-form';

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      ...
    </form>
  );
}

Eingaben registrieren

Verteilen Sie das Ergebnis von register('fieldName') auf jedes Eingabefeld. RHF fügt dem Eingabefeld intern eine Referenz und Event-Handler hinzu — value oder onChange sind nicht erforderlich.

<input {...register('email')} type="email" />
<input {...register('password')} type="password" />
<button type="submit">Log in</button>

Der onSubmit-Callback

handleSubmit validiert alle Felder und ruft Ihren onSubmit-Callback nur dann mit einem typisierten Datenobjekt auf, wenn das Formular gültig ist. Wenn die Validierung fehlschlägt, füllt es stattdessen formState.errors aus.

const onSubmit = (data) => {
  // data = { email: 'a@b.com', password: 'secret' }
  loginUser(data);
};

Standardwerte

Übergeben Sie `defaultValues` an useForm, um Formularfelder vorab auszufüllen. Dies ist nützlich für Bearbeitungsformulare, in die Sie vorhandene Daten laden.

const { register } = useForm({
  defaultValues: { email: user.email, name: user.name },
});

Eigenschaften von formState

formState stellt nützliche boolesche Werte bereit: `isSubmitting` (true, während handleSubmit ausgeführt wird), `isDirty` (true, wenn ein Feld geändert wurde), `isValid` (true, wenn keine Fehler vorliegen) und das Objekt `errors`.

const { formState: { isSubmitting, isDirty, isValid, errors } } = useForm();

Formular zurücksetzen

Rufen Sie `reset()` auf, um alle Felder zu leeren und formState zurückzusetzen. Optional können Sie neue Standardwerte übergeben.

const { reset } = useForm();

const onSubmit = async (data) => {
  await saveData(data);
  reset(); // clear after submit
};

Leistungsvorteil

Da RHF unkontrollierte Eingaben verwendet, wird das Formular nicht bei jedem Tastendruck erneut gerendert — anders als kontrollierte React-Formulare. Nur Validierungsfehler und der Übermittlungsstatus lösen erneute Renderdurchläufe aus, wodurch große Formulare reaktionsschnell bleiben.

Kurztest

Was bewirkt der Aufruf von handleSubmit(onSubmit), wenn die Benutzerin oder der Benutzer das Formular übermittelt?

Zusammenfassung

Installieren Sie RHF, rufen Sie useForm auf, um register und handleSubmit zu erhalten, verteilen Sie register() auf die Eingabefelder und umschließen Sie Ihren Übermittlungs-Handler mit handleSubmit. Setzen Sie defaultValues für Bearbeitungsformulare und rufen Sie reset() nach einer erfolgreichen Übermittlung auf.

Als Nächstes

Nächste Lektion: **Validierungsregeln und Fehlermeldungen** — Sie wenden integrierte Validierungsregeln an und zeigen Benutzerinnen und Benutzern Fehlermeldungen an.

Häufig gestellte Fragen

Ist die Lektion „Erste Schritte mit React Hook Form“ kostenlos?

Ja — der vollständige Text von „Erste Schritte mit React Hook Form“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Erste Schritte mit React Hook Form“?

Installieren Sie RHF, rufen Sie useForm auf, registrieren Sie Eingaben und verarbeiten Sie das Absenden von Formularen. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um React Academy zu starten?

Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Erste Schritte mit React Hook Form“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?

Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu React Academy