Formulare mit React Hook Form validieren

Unser ReviewForm.jsx aus dem letzten Kapitel funktioniert, aber bei größeren Formularen (viele Felder, komplexere Regeln) wird der manuelle Ansatz schnell repetitiv. React Hook Form ist die mit Abstand populärste Bibliothek, um das zu automatisieren.

Installation

npm install react-hook-form

Warum React Hook Form (und nicht nur mehr eigener Code)?

Weniger Re-Renders: React Hook Form hält Feldwerte intern über unkontrollierte Referenzen fest (siehe Kapitel 13) statt über useState pro Tastenanschlag – bei großen Formularen spürbar performanter.
Eingebaute Validierungsregeln: "required", "minLength", eigene Prüf-Funktionen – ohne dass Sie jede Regel selbst schreiben.
Weniger Code: kein useState pro Feld, kein manuelles onChange-Handling.

ReviewForm.jsx umbauen

Ersetzen Sie den kompletten Inhalt von src/components/ReviewForm.jsx:

src/components/ReviewForm.jsx

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

function ReviewForm({ onSubmitReview }) {
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm({
    defaultValues: { name: '', rating: 5, comment: '' },
  });

  function onValid(values) {
    onSubmitReview(values);
    reset();
  }

  return (
    <form onSubmit={handleSubmit(onValid)} className="review-form">
      <div className="form-field">
        <label htmlFor="name">Name</label>
        <input
          id="name"
          {...register('name', { required: 'Bitte geben Sie Ihren Namen ein.' })}
        />
        {errors.name && <p className="form-error">{errors.name.message}</p>}
      </div>

      <div className="form-field">
        <label htmlFor="rating">Bewertung</label>
        <select id="rating" {...register('rating')}>
          {[5, 4, 3, 2, 1].map((stern) => (
            <option key={stern} value={stern}>{stern} {stern === 1 ? 'Stern' : 'Sterne'}</option>
          ))}
        </select>
      </div>

      <div className="form-field">
        <label htmlFor="comment">Kommentar</label>
        <textarea
          id="comment"
          {...register('comment', {
            minLength: { value: 10, message: 'Der Kommentar muss mindestens 10 Zeichen lang sein.' },
          })}
        />
        {errors.comment && <p className="form-error">{errors.comment.message}</p>}
      </div>

      <button type="submit">Bewertung abschicken</button>
    </form>
  );
}

export default ReviewForm;

register() verstehen: das Herzstück der Bibliothek

{{...register('name', {{ required: '...' }})}} ist die zentrale Idee: register() gibt ein Objekt mit genau den Props zurück, die ein <input> braucht, um sich bei React Hook Form anzumelden (u. a. name, onChange, onBlur, ref) – der Spread-Operator {{...register(...)}} reicht diese automatisch alle als Props durch, ohne dass Sie sie einzeln aufschreiben müssen.

formState: {{ errors }} enthält nach einem fehlgeschlagenen Validierungsversuch automatisch die passenden Fehlermeldungen pro Feldname – errors.name.message ist genau der String, den Sie bei required übergeben haben.

Kapitel 14 (manuell)	React Hook Form
`useState` pro Feld + eigene `validate()`-Funktion	`register('feldname', {{ regeln }})` übernimmt State UND Validierung
`onChange`-Handler manuell für jedes Feld schreiben	automatisch über `register()` verdrahtet
`event.preventDefault()` manuell aufrufen	`handleSubmit(onValid)` übernimmt das automatisch, ruft `onValid` nur bei GÜLTIGEN Daten auf

Tipp: Beide Ansätze – manuelle Validierung und React Hook Form – sind gültige, gängige Muster in echten Projekten. Kleine, einfache Formulare (ein bis zwei Felder) sind manuell oft genauso schnell geschrieben; sobald ein Formular wächst, zahlt sich React Hook Form spürbar aus.