Einfaches Erstellen von Reaktionsformularen mit React Hook Form, Zod und Shadcn

Formulare begegnen jedem Entwickler, sei es als Benutzer oder auf Entwicklerseite. Sie sind auf den meisten Websites unverzichtbar, ihre Komplexität kann jedoch stark variieren – von einfachen Kontaktformularen mit drei Feldern bis hin zu mehrseitigen Giga-Monster-T-Rex-Formularen mit 150 Feldern, dynamischer Validierung und asynchronen Prüfungen.

In diesem Beitrag untersuchen wir, wie React Hook Form, Zod und Shadcn verwendet werden können, um eine anpassungsfähige, entwicklerfreundliche Lösung zu erstellen, die eine Vielzahl von Formularanforderungen problemlos bewältigt.

Das Formular, das wir erstellen werden

Hier ist das Formular, das wir in diesem Beitrag entwickeln werden. Ich habe vor, einen weiteren Beitrag über eine fortgeschrittene Verwendung von Formularen zu schreiben, der im Nachgang noch komplexer sein wird, also bleiben Sie dran?

Lernen Sie die Werkzeuge kennen

Sehen wir uns den Stack an, den wir zum Erstellen und Verwalten unserer Formulare verwenden werden.

Reagieren und Wasp

• Framework: Wasp (Full-Stack-Framework für React, Node.js und Prisma).
• Ermöglicht eine schnelle, effiziente Full-Stack-Webentwicklung und -Bereitstellung mit React.

Hook-Form reagieren

• Leichte Bibliothek zum Erstellen von Formularen in React, hauptsächlich über den useForm-Hook.
• Übernimmt die Formularvalidierung und Fehlerverwaltung und bietet flexible Validierungsmethoden und Integration mit verschiedenen UI-Komponentenbibliotheken.

Zod

• TypeScript-first-Validierungsbibliothek zum Erstellen detaillierter, wiederverwendbarer Validierungsschemata.
• Integration mit TypeScript-Typen, um die Validierung einheitlich zu halten und Duplikate zu vermeiden.

Shadcn/UI

• Sammlung wiederverwendbarer UI-Komponenten, die direkt in das Projekt eingebettet sind, was es Entwicklern ermöglicht, nur das zu nehmen, was sie brauchen, und diese Komponenten auch anzupassen.
• Bietet integrierte Unterstützung für React Hook Form und Zod.

Hier ist ein Beispielausschnitt, der ein Formularfeld in der Shadcn-Bibliothek zeigt:

<FormField
  control={form.control}
  name="name"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Name</FormLabel>
      <FormControl>
        <Input {...field} />
      </FormControl>
      <FormMessage />
    </FormItem>
  )}
/>

Auch wenn Sie es vorziehen, eine andere Variante des Stacks zu verwenden, ist dies immer noch ein gültiges Beispiel, das Ihnen den Einstieg erleichtern wird, solange Sie bei React und RHF bleiben.

Lassen Sie uns ein einfaches Benutzer-Dashboard erstellen

Die Anwendung, die wir zur Demonstration grundlegender Formulare verwenden, ist ein Admin-Panel mit wesentlichen CRUD-Operationen. Es beinhaltet E-Mail- und Passwort-Authentifizierung und besteht aus zwei Seiten: einem Hauptbildschirm, der eine Tabelle aller Benutzer anzeigt, und einer Seite zur Benutzererstellung, die der Star dieses Artikels sein wird.

Unser Formular beinhaltet eine Validierung, um sicherzustellen, dass Benutzer es nicht senden (d. h. einen neuen Benutzer erstellen) können, ohne die angegebenen Anforderungen zu erfüllen. Das User-Objekt ist ein ausgezeichneter Kandidat für Validierungsbeispiele, da es eine Vielzahl von Datentypen enthält, die für verschiedene Validierungen geeignet sind: Zeichenfolgen, Daten (z. B. Geburtsdatum), E-Mail-Zeichenfolgen und boolesche Werte (z. B. Premium-Benutzerstatus). Die vollständige Prisma-Schemadatei wird unten angezeigt.

<FormField
  control={form.control}
  name="name"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Name</FormLabel>
      <FormControl>
        <Input {...field} />
      </FormControl>
      <FormMessage />
    </FormItem>
  )}
/>

Um unser Projekt anzukurbeln, verwenden wir eine vordefinierte Wasp-Vorlage mit TypeScript namens todo-ts. Diese Vorlage enthält vorgefertigte Komponenten und Routing für die Authentifizierung, einschließlich Anmelde- und Anmeldebildschirmen. Es bietet auch ein solides Beispiel dafür, wie CRUD-Operationen in Wasp funktionieren, ideal, wenn Sie mit dem Framework noch nicht vertraut sind. Darüber hinaus werden wir das neue Wasp TypeScript SDK zur Verwaltung unserer Konfiguration nutzen, da es erweiterte Flexibilität für die Anpassung bietet.

Finden Sie diesen Artikel nützlich?

Das Wasp-Team arbeitet hart daran, solche Inhalte zu erstellen, ganz zu schweigen vom Aufbau eines modernen Open-Source-React/NodeJS-Frameworks.

Der einfachste Weg, Ihre Unterstützung zu zeigen, besteht einfach darin, Wasp Repo zu markieren! ? Wir würden uns jedoch sehr freuen, wenn Sie einen Blick in das Repository werfen könnten (für Beiträge oder einfach zum Testen des Produkts). Klicken Sie auf die Schaltfläche unten, um Wasp einen Stern zu geben und Ihre Unterstützung zu zeigen!

⭐️ Vielen Dank für Ihre Unterstützung?

Alles zusammen – Zod-Schema-React-Hook-Form-Instanzlayout

Um mit Formularen zu arbeiten, definieren wir zunächst ein Zod-Validierungsschema. Unser Formular verfügt über drei Datentypen: Zeichenfolgen, ein Datum und einen booleschen Wert. Wir wenden die Validierung auf die meisten Felder an: Vor- und Nachname sind erforderlich, während E-Mail die integrierte E-Mail-Validierung nutzt. Zod vereinfacht die Validierung gängiger Zeichenfolgentypen durch integrierte Validierungen für verschiedene Typen wie E-Mails, URLs und UUIDs, was für unser E-Mail-Feld hilfreich ist.

Für zusätzliche Validierungen kann das Datum nicht auf ein zukünftiges Datum festgelegt werden und das premiumUser-Feld muss lediglich ein boolescher Wert sein. Zod bietet auch standardmäßige Validierungsfehlermeldungen, diese können jedoch angepasst werden. Anstelle von Name: z.string().min(1) könnten wir beispielsweise Name: z.string().min(1, 'Name ist erforderlich') angeben.

<FormField
  control={form.control}
  name="name"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Name</FormLabel>
      <FormControl>
        <Input {...field} />
      </FormControl>
      <FormMessage />
    </FormItem>
  )}
/>

Unser Formular wird durch den useForm-Hook von React Hook Form verwaltet, der umfangreiche Optionen zum Behandeln und Validieren von Formularwerten, zum Überprüfen von Fehlern und zum Verwalten des Formularstatus bietet. Um unser Zod-Validierungsschema zu integrieren, verwenden wir einen Zod-Resolver, der es React Hook Form ermöglicht, die zuvor definierten Validierungen anzuwenden.

Die Standardwerte des Formulars werden vom Kundenobjekt abgeleitet. Da diese Komponente sowohl zum Hinzufügen neuer Kunden als auch zum Bearbeiten bestehender Kunden verwendet wird, übergeben wir die erforderlichen Daten als Eingabe. Für einen Neukunden werden einige sinnvolle Standardwerte verwendet; Bei Bestandskunden werden die Daten aus der Datenbank abgerufen. Abgesehen von der Festlegung von Standardwerten und der Festlegung, ob „createCustomer“ oder „updateCustomer“ aufgerufen werden soll, bleiben alle anderen Aspekte der Formularverarbeitung gleich.

model Customer {
  id    Int    @id @default(autoincrement())
  name  String
  surname String
  email String
  dateOfBirth DateTime
  premiumUser Boolean
}

Der letzte Schritt besteht darin, das Formular selbst zu erstellen und es in der TSX-Datei zusammenzustellen. Wie bereits gezeigt, ist dieser Vorgang unkompliziert. Unabhängig davon, ob wir Texteingaben, Datumsauswahlen oder Kontrollkästchen mit Shadcn-Steuerelementen verwenden, folgen wir einer ähnlichen Struktur:

• Erstellen Sie zunächst das FormField-Element und legen Sie seine Steuer-, Namens- und Rendereigenschaften fest.
• Die render-Eigenschaft ist der Schlüssel, da sie das Formularelement selbst enthält.
• Normalerweise verpacken wir alles in FormItem, fügen ein FormLabel für die Beschriftung hinzu und platzieren das kontrollierte Formularelement mit dem entsprechenden Wert und der Setter-Methode in FormControl.
• Schließlich fügen wir unten FormMessage ein, das die Zod-Validierungsmeldung anzeigt, wenn die Validierung fehlschlägt.

  const formSchema = z.object({
    name: z.string().min(1, { message: 'Name is required' }),
    surname: z.string().min(1, { message: 'Surname is required' }),
    email: z.string().email({ message: 'Invalid email address' }),
    dateOfBirth: z
      .date()
      .max(new Date(), { message: 'Date cannot be in the future' }),
    premiumUser: z.boolean(),
  });

Wenn Sie neugierig sind, die fertige Anwendung zu sehen, schauen Sie sich das GitHub-Repository hier an: GitHub Repo. Ich hoffe, dieser Artikel hat die Arbeit mit Formularen einfacher gemacht, und wenn Sie an weiteren formularbezogenen Inhalten interessiert sind, bleiben Sie dran für Teil zwei! Im nächsten Teil befassen wir uns mit erweiterten Mustern und Validierungstechniken zur Verbesserung Ihrer Anwendungen.

Bitte denken Sie darüber nach, Wasp auf GitHub zu veröffentlichen, wenn Ihnen dieser Beitrag gefallen hat! Ihre Unterstützung hilft uns, die Webentwicklung für alle weiterhin einfacher und reibungsloser zu gestalten. ?

Das obige ist der detaillierte Inhalt vonEinfaches Erstellen von Reaktionsformularen mit React Hook Form, Zod und Shadcn. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!