HILFE ZUM KNOTENPUNKT

react hook form NPM (Wie es für Entwickler funktioniert)

Veröffentlicht 24. Oktober 2024

Teilen Sie:

Einführung

React Hook Form ist eine leistungsstarke und effiziente Bibliothek zur Verwaltung von Formularwerten in React-Anwendungen. Sie nutzt React Hooks, um ein nahtloses und performantes Erlebnis ohne jegliche Controller-Komponente zu bieten. In diesem Artikel werden die Grundlagen der React Hook-Formularübermittlung mit benutzerdefinierter Fehlermeldung und ihre Vorteile erläutert und anhand von Codebeispielen erläutert.

Warum React Hook Form verwenden?

Leistung: React Hook Form verwendet unkontrollierte Komponenten und native HTML-Eingaben, wodurch die Anzahl der erneuten Renderings reduziert und die Leistung verbessert wird.
Einfachheit: Die API ist intuitiv und einfach zu bedienen und erfordert weniger Codezeilen als andere Formularbibliotheken.
Flexibilität: Es unterstützt komplexe React Hook-Formularvalidierung, einschränkungsbasierte Validierungs-API und lässt sich gut mit UI-Bibliotheken integrieren.

Einrichtung

Um React Hook Form zu installieren, führen Sie den folgenden Befehl aus:

npm install react-hook-form
or
yarn add react-hook-form

Grundlegende Verwendung

Lassen Sie uns ein einfaches Registrierungsformular ohne kontrollierte Komponente und untergeordnete Komponente mit dem React Hook Form erstellen.

Importieren Sie den useForm Hook:

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

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

JAVASCRIPT

Initialize the Hook:

const { register, handleSubmit, formState: { errors } } = useForm();

const { register, handleSubmit, formState: { errors } } = useForm();

JAVASCRIPT

**Erstellen Sie das Formular mit einem Eingabewert und einem Fehlerobjekt für fehlgeschlagene Validierungen:

function RegistrationForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>First Name</label>
        {errors.firstName && <span>This field is required</span>}
      </div>
      <div>
        <label>Last Name</label>
        {errors.lastName && <span>This field is required</span>}
      </div>
      <div>
        <label>Email</label>
        {errors.email && <span>Invalid email address</span>}
      </div>
    </form>
  );
}

function RegistrationForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>First Name</label>
        {errors.firstName && <span>This field is required</span>}
      </div>
      <div>
        <label>Last Name</label>
        {errors.lastName && <span>This field is required</span>}
      </div>
      <div>
        <label>Email</label>
        {errors.email && <span>Invalid email address</span>}
      </div>
    </form>
  );
}

JAVASCRIPT

Ausgabe

react Hook Form NPM (Wie es für Entwickler funktioniert): Abbildung 1 - Ausgabe des Registrierungsformulars

Erweiterte Verwendung

React Hook Form unterstützt fortgeschrittene Anwendungsfälle, wie die Integration mit UI-Bibliotheken von Drittanbietern und benutzerdefinierte Validierung.

Integration mit Material-UI:

import { TextField, Button } from '@material-ui/core';
import { useForm, Controller } from 'react-hook-form';
function MaterialUIForm() {
  const { control, handleSubmit } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="firstName"
        control={control}
        defaultValue=""
        render={({ field }) => <TextField {...field} label="First Name" />}
      />
      <Controller
        name="lastName"
        control={control}
        defaultValue=""
        render={({ field }) => <TextField {...field} label="Last Name" />}
      />
      <Button type="submit">Submit</Button>
    </form>
  );
}

import { TextField, Button } from '@material-ui/core';
import { useForm, Controller } from 'react-hook-form';
function MaterialUIForm() {
  const { control, handleSubmit } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="firstName"
        control={control}
        defaultValue=""
        render={({ field }) => <TextField {...field} label="First Name" />}
      />
      <Controller
        name="lastName"
        control={control}
        defaultValue=""
        render={({ field }) => <TextField {...field} label="Last Name" />}
      />
      <Button type="submit">Submit</Button>
    </form>
  );
}

JAVASCRIPT

ausgabe

react hook form NPM(Wie es für Entwickler funktioniert): Abbildung 2 - Material UI Form Output

Benutzerdefinierte Validierung:

function CustomValidationForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>Username</label>
        <input {...register("username", { 
          required: "Username is required", 
          validate: value => value !== "admin" 
 "Username cannot be 'admin'" 
        })} />
        {errors.username && <span>{errors.username.message}</span>}
      </div>
    </form>
  );
}

function CustomValidationForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>Username</label>
        <input {...register("username", { 
          required: "Username is required", 
          validate: value => value !== "admin" 
 "Username cannot be 'admin'" 
        })} />
        {errors.username && <span>{errors.username.message}</span>}
      </div>
    </form>
  );
}

JAVASCRIPT

Ausgabe

react hook form NPM(Wie es für Entwickler funktioniert): Abbildung 3 - Ausgabe eines benutzerdefinierten Validierungsformulars

Einführung in IronPDF

react Hook von NPM (Wie es für Entwickler funktioniert): Abbildung 4 - IronPDF

IronPDF for Node.js ist eine beliebte Bibliothek zur Erstellung von PDF-Dokumenten, mit der sich PDFs erzeugen, bearbeiten und konvertieren lassen. Das IronPDF-Paket ist speziell für Node.js-Anwendungen konzipiert. Im Folgenden finden Sie einige wichtige Funktionen und Details über das IronPDF NPM-Paket.

Wesentliche Merkmale

Konvertierung von URL in PDF

Generieren Sie PDF-Dokumente direkt aus URLs, so dass Sie den Inhalt von Webseiten erfassen und programmgesteuert als PDF-Dateien speichern können.

Konvertierung von HTML in PDF

Konvertieren Sie mühelos HTML-Inhalte in PDF-Dokumente. Diese Funktion ist besonders nützlich für die Erstellung dynamischer PDFs aus Webinhalten.

PDF-Bearbeitung

Bestehende PDF-Dokumente lassen sich mühelos zusammenführen, aufteilen und manipulieren. IronPDF bietet Funktionen wie das Anhängen von Seiten, das Aufteilen von Dokumenten und vieles mehr.

PDF-Sicherheit

Sichern Sie Ihre PDF-Dokumente, indem Sie sie mit Passwörtern verschlüsseln oder mit digitalen Signaturen versehen. IronPDF bietet Optionen zum Schutz Ihrer vertraulichen Dokumente vor unbefugtem Zugriff.

Hochwertiger Output

Erstellen Sie hochwertige PDF-Dokumente mit präzisem Rendering von Text, Bildern und Formatierungen. IronPDF stellt sicher, dass die von Ihnen generierten PDF-Dateien dem ursprünglichen Inhalt treu bleiben.

Plattformübergreifende Kompatibilität

IronPDF ist mit verschiedenen Plattformen kompatibel, darunter Windows, Linux und macOS, und eignet sich daher für eine breite Palette von Entwicklungsumgebungen.

Einfache Integration

Integrieren Sie IronPDF einfach in Ihre Node.js-Anwendungen mit Hilfe des npm-Pakets. Die API ist gut dokumentiert, so dass es einfach ist, PDF-Generierungsfunktionen in Ihre Projekte einzubinden.

Einrichtung

Um das NPM-Paket IronPDF zu installieren, verwenden Sie den folgenden Befehl:

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64

PDF-Dokument mit IronPDF generieren und Prettier-NPM-Paket verwenden

Abhängigkeiten installieren: Erstellen Sie zunächst ein neues Next.js-Projekt(falls Sie es noch nicht getan haben) mit dem folgenden Befehl. Siehe dazu dieNext.js Einrichtungsseite

npx create-next-app@latest reacthookform-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

Navigieren Sie dann zu Ihrem Projektverzeichnis:

cd reacthookform-pdf

Installieren Sie die erforderlichen Pakete:

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add -D prettier

Eine PDF-Datei erstellen

Lassen Sie uns nun ein einfaches Beispiel für die Erstellung einer PDF-Datei mit IronPDF erstellen.

PDF-Erzeugungs-API: Der erste Schritt besteht darin, eine Backend-API zu erstellen, um das PDF-Dokument zu generieren. Da IronPDF nur serverseitig läuft, müssen wir eine API erstellen, die aufgerufen wird, wenn ein Benutzer ein PDF erzeugen möchte. Erstellen Sie eine Datei im Pfad pages/api/pdf.js und fügen Sie den folgenden Inhalt hinzu.

IronPDF benötigt einen Lizenzschlüssel, den Sie von derlizenzseite und fügen Sie ihn in den unten stehenden Code ein.

// pages/api/pdf.js
import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey =   "your license";
export default async function handler(req, res) {
  try {
    const f = req.query.f;
    const l = req.query.l;
    const e = req.query.e;
    let content = "<h1>Demo React Hook Form and Generate PDF Using IronPDF</h1>"
    content+="<p>First Name:"+f+"</p>";
    content+="<p>Last Name:"+l+"</p>";
    content+="<p>Email:"+e+"</p>";
    const pdf = await PdfDocument.fromHtml(content);
    const data = await pdf.saveAsBuffer();
    console.error("data PDF:", data);
    res.setHeader("Content-Type", "application/pdf");
    res.setHeader(
      "Content-Disposition",
      "attachment; filename=awesomeIron.pdf",
    );
    res.send(data);
  } catch (error) {
    console.error("Error generating PDF:", error);
    res.status(500).end();
  }
}

// pages/api/pdf.js
import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey =   "your license";
export default async function handler(req, res) {
  try {
    const f = req.query.f;
    const l = req.query.l;
    const e = req.query.e;
    let content = "<h1>Demo React Hook Form and Generate PDF Using IronPDF</h1>"
    content+="<p>First Name:"+f+"</p>";
    content+="<p>Last Name:"+l+"</p>";
    content+="<p>Email:"+e+"</p>";
    const pdf = await PdfDocument.fromHtml(content);
    const data = await pdf.saveAsBuffer();
    console.error("data PDF:", data);
    res.setHeader("Content-Type", "application/pdf");
    res.setHeader(
      "Content-Disposition",
      "attachment; filename=awesomeIron.pdf",
    );
    res.send(data);
  } catch (error) {
    console.error("Error generating PDF:", error);
    res.status(500).end();
  }
}

JAVASCRIPT

Ändern Sie nun die index.js.

import Head from "next/head";
import styles from "../styles/Home.module.css";
import React, { useState } from "react";
import { useForm } from "react-hook-form";
export default function Home() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = (data) => {
    generatePdf(data);
  };
  const generatePdf = async (data) => {
    try {
      console.log("/api/pdf?f=" + data["firstName"]+"&l="+data["lastName"]+"&e="+data["email"]);
      const response = await fetch("/api/pdf-html?f=" + data["firstName"]+"&l="+data["lastName"]+"&e="+data["email"]);
      const blob = await response.blob();
      const url = window.URL.createObjectURL(new Blob([blob]));
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", "awesomeIron.pdf");
      document.body.appendChild(link);
      link.click();
      link.parentNode.removeChild(link);
    } catch (error) {
      console.error("Error generating PDF:", error);
    }
  };
  const handleChange = (event) => {
    setText(event.target.value);
  };
  return (
    <div className={styles.container}>
      <Head>
        <title>Generate PDF Using IronPDF</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <h1>Demo React Hook Form and Generate PDF Using IronPDF</h1>
        <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>First Name</label>
        {errors.firstName && <span>This field is required</span>}
      </div>
      <div>
        <label>Last Name</label>
        {errors.lastName && <span>This field is required</span>}
      </div>
      <div>
        <label>Email</label>
        {errors.email && <span>Invalid email address</span>}
      </div>
      <button type="submit" >Submit and Generate PDF</button>
    </form>
      </main>
      <style jsx>{`
        main {
          padding: 5rem 0;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
        footer {
          width: 100%;
          height: 100px;
          border-top: 1px solid #eaeaea;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        footer img {
          margin-left: 0.5rem;
        }
        footer a {
          display: flex;
          justify-content: center;
          align-items: center;
          text-decoration: none;
          color: inherit;
        }
        code {
          background: #fafafa;
          border-radius: 5px;
          padding: 0.75rem;
          font-size: 1.1rem;
          font-family:
            Menlo,
            Monaco,
            Lucida Console,
            Liberation Mono,
            DejaVu Sans Mono,
            Bitstream Vera Sans Mono,
            Courier New,
            monospace;
        }
      `}</style>
      <style jsx global>{`
        html,
        body {
          padding: 0;
          margin: 0;
          font-family:
            -apple-system,
            BlinkMacSystemFont,
            Segoe UI,
            Roboto,
            Oxygen,
            Ubuntu,
            Cantarell,
            Fira Sans,
            Droid Sans,
            Helvetica Neue,
            sans-serif;
        }
        * {
          box-sizing: border-box;
        }
      `}</style>
    </div>
  );
}

import Head from "next/head";
import styles from "../styles/Home.module.css";
import React, { useState } from "react";
import { useForm } from "react-hook-form";
export default function Home() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = (data) => {
    generatePdf(data);
  };
  const generatePdf = async (data) => {
    try {
      console.log("/api/pdf?f=" + data["firstName"]+"&l="+data["lastName"]+"&e="+data["email"]);
      const response = await fetch("/api/pdf-html?f=" + data["firstName"]+"&l="+data["lastName"]+"&e="+data["email"]);
      const blob = await response.blob();
      const url = window.URL.createObjectURL(new Blob([blob]));
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", "awesomeIron.pdf");
      document.body.appendChild(link);
      link.click();
      link.parentNode.removeChild(link);
    } catch (error) {
      console.error("Error generating PDF:", error);
    }
  };
  const handleChange = (event) => {
    setText(event.target.value);
  };
  return (
    <div className={styles.container}>
      <Head>
        <title>Generate PDF Using IronPDF</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <h1>Demo React Hook Form and Generate PDF Using IronPDF</h1>
        <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>First Name</label>
        {errors.firstName && <span>This field is required</span>}
      </div>
      <div>
        <label>Last Name</label>
        {errors.lastName && <span>This field is required</span>}
      </div>
      <div>
        <label>Email</label>
        {errors.email && <span>Invalid email address</span>}
      </div>
      <button type="submit" >Submit and Generate PDF</button>
    </form>
      </main>
      <style jsx>{`
        main {
          padding: 5rem 0;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
        footer {
          width: 100%;
          height: 100px;
          border-top: 1px solid #eaeaea;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        footer img {
          margin-left: 0.5rem;
        }
        footer a {
          display: flex;
          justify-content: center;
          align-items: center;
          text-decoration: none;
          color: inherit;
        }
        code {
          background: #fafafa;
          border-radius: 5px;
          padding: 0.75rem;
          font-size: 1.1rem;
          font-family:
            Menlo,
            Monaco,
            Lucida Console,
            Liberation Mono,
            DejaVu Sans Mono,
            Bitstream Vera Sans Mono,
            Courier New,
            monospace;
        }
      `}</style>
      <style jsx global>{`
        html,
        body {
          padding: 0;
          margin: 0;
          font-family:
            -apple-system,
            BlinkMacSystemFont,
            Segoe UI,
            Roboto,
            Oxygen,
            Ubuntu,
            Cantarell,
            Fira Sans,
            Droid Sans,
            Helvetica Neue,
            sans-serif;
        }
        * {
          box-sizing: border-box;
        }
      `}</style>
    </div>
  );
}

JAVASCRIPT

Code Erläuterung

Erstellen Sie eine React-Formularansicht zur Eingabe von Vorname, Nachname und E-Mail mithilfe der React Hook Form-Bibliothek.
Erstellen Sie eine API, die die Benutzereingaben entgegennimmt und die PDF-Datei mithilfe der IronPDF-Bibliothek erzeugt.
Wenn der Benutzer in der index.js-Datei auf die Schaltfläche "Submit then generate PDF" klickt, wird die Backend-API zur Generierung einer PDF-Datei aufgerufen.

Ausgabe

PDF

react Hook von NPM (Wie es für Entwickler funktioniert): Abbildung 5 - PDF-Ausgabe

IronPDF-Lizenz

IronPDF npm-Paket läuft mit einem Lizenzschlüssel für jeden Benutzer. IronPDF bietet einekostenlose Testversion lizenz, damit die Benutzer die umfangreichen Funktionen vor dem Kauf testen können.

Legen Sie den Lizenzschlüssel hier ab, bevor Sie das IronPDF-Paket verwenden:

import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";

import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";

JAVASCRIPT

Schlussfolgerung

React Hook Form ist eine vielseitige und effiziente Bibliothek für die Bearbeitung von Formularen in React. Seine Einfachheit, Leistung und Flexibilität machen es zu einer guten Wahl sowohl für einfache als auch für komplexe Formulare. Ganz gleich, ob Sie ein kleines Projekt oder eine große Anwendung erstellen, mit React Hook Form können Sie Ihre Formulare mühelos verwalten. IronPDF zeichnet sich als robuste Lösung für .NET-Entwickler aus, die programmatisch mit PDF-Dokumenten arbeiten müssen. Mit seinem umfangreichen Funktionsumfang, einschließlich PDF-Erstellung aus verschiedenen Formaten, Manipulationsfunktionen wie Zusammenführung und Bearbeitung, Sicherheitsoptionen, Formularerstellung und Formatkonvertierung, vereinfacht IronPDF die Integration von PDF-Funktionen in .NET-Anwendungen. Die benutzerfreundliche API und die Vielseitigkeit machen es zu einem wertvollen Werkzeug für die effiziente Verwaltung von PDF-Aufgaben in Entwicklungsprojekten.

Regan Pun

Software-Ingenieur

LinkedIn

Regan schloss sein Studium an der University of Reading mit einem BA in Elektrotechnik ab. Bevor er zu Iron Software kam, konzentrierte er sich in seinen früheren Jobs auf einzelne Aufgaben. Was ihm bei Iron Software am meisten Spaß macht, ist das Spektrum der Aufgaben, die er übernehmen kann, sei es im Vertrieb, im technischen Support, in der Produktentwicklung oder im Marketing. Es macht ihm Spaß, die Art und Weise zu verstehen, wie Entwickler die Bibliothek von Iron Software nutzen, und dieses Wissen zu nutzen, um die Dokumentation und die Produkte kontinuierlich zu verbessern.

< PREVIOUS
rxjs NPM (Wie es für Entwickler funktioniert)

NÄCHSTES >
faye NPM (Wie es für Entwickler funktioniert)