信息圖標
跳過到頁腳內容
  1. IronPDF for Node.js
  2. IronPDF for Node.js 博客
  3. Node 說明
  4. react hook form NPM
NODE 說明

react hook form NPM（開發者的使用方法）

Darrius Serrant
Darrius Serrant
更新日期:

React Hook Form 是一個強大且高效的庫，用於管理 React 應用程式中的表單值。 它利用 React 函數鉤提供無縫且高效的體驗，無需任何控制元件。 在本文中，我們將探索 React Hook Form 提交的基本知識，帶有自定義錯誤消息及其益處，並提供代碼示例以幫助您入門。

為什麼使用 React Hook Form？

  1. 性能: React Hook Form 使用非控制元件和原生 HTML 輸入，減少重繪次數，提高性能。
  2. 簡單性: API 直觀且易於使用，比其他表單庫需要更少的代碼行。
  3. 靈活性: 它支持複雜的 React Hook Form 驗證、基於約束的驗證 API，並且能很好地與 UI 庫集成。

安裝

要安裝 React Hook Form，執行以下指令：

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

基本使用

讓我們使用 React Hook Form 創建一個沒有控制元件和子元件的簡單註冊表單。

  1. 匯入 useForm 鉤子：
import { useForm } from "react-hook-form";
import { useForm } from "react-hook-form";
JAVASCRIPT
  1. 初始化鉤子：
const { register, handleSubmit, formState: { errors } } = useForm();
const { register, handleSubmit, formState: { errors } } = useForm();
JAVASCRIPT
  1. 建立擁有輸入字段和錯誤處理的表單：
function RegistrationForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  // Function to handle form submission
  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>First Name</label>
        <input {...register("firstName", { required: true })} />
        {errors.firstName && <span>This field is required</span>}
      </div>
      <div>
        <label>Last Name</label>
        <input {...register("lastName", { required: true })} />
        {errors.lastName && <span>This field is required</span>}
      </div>
      <div>
        <label>Email</label>
        <input {...register("email", { required: true, pattern: /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/ })} />
        {errors.email && <span>Invalid email address</span>}
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}
function RegistrationForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  // Function to handle form submission
  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>First Name</label>
        <input {...register("firstName", { required: true })} />
        {errors.firstName && <span>This field is required</span>}
      </div>
      <div>
        <label>Last Name</label>
        <input {...register("lastName", { required: true })} />
        {errors.lastName && <span>This field is required</span>}
      </div>
      <div>
        <label>Email</label>
        <input {...register("email", { required: true, pattern: /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/ })} />
        {errors.email && <span>Invalid email address</span>}
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}
JAVASCRIPT

輸出

react hook form NPM（對開發人員的運作方式）：圖 1 - 註冊表單輸出

進階使用

React Hook Form 支持更多高級用例，例如與第三方 UI 庫集成和自定義驗證。

  1. 與 Material-UI 集成：
import { TextField, Button } from '@material-ui/core';
import { useForm, Controller } from 'react-hook-form';

function MaterialUIForm() {
  const { control, handleSubmit } = useForm();

  // Function to handle form submission
  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="firstName"
        control={control}
        defaultValue=""
        // Using Material-UI's TextField as a controlled component
        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();

  // Function to handle form submission
  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="firstName"
        control={control}
        defaultValue=""
        // Using Material-UI's TextField as a controlled component
        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

輸出

react hook form NPM（對開發人員的運作方式）：圖 2 - Material UI 表單輸出

  1. 自定義驗證：
function CustomValidationForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  // Function to handle form submission
  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>
      <button type="submit">Submit</button>
    </form>
  );
}
function CustomValidationForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  // Function to handle form submission
  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>
      <button type="submit">Submit</button>
    </form>
  );
}
JAVASCRIPT

輸出

react hook form NPM（對開發人員的運作方式）：圖 3 - 自定義驗證表單輸出

IronPDF介紹

react hook form NPM（對開發人員的運作方式）：圖 4 - IronPDF

IronPDF for Node.js 是一個用於生成、編輯和轉換 PDF 的流行 PDF 文件生成庫。 IronPDF 套件專為 Node.js 應用程式設計。 以下是有關 IronPDF NPM 套件的一些關鍵功能和詳細資訊。

關鍵特性

URL 到 PDF 轉換

直接從 URL 生成 PDF 文件，允許您捕獲網頁內容並以程序化方式將其儲存為 PDF 文件。

HTML 到 PDF 轉換

輕鬆將 HTML 內容轉換為 PDF 文件。 此功能特別適用於從網絡內容生成動態 PDF。

PDF 操作

輕鬆合併、分割和操作現有 PDF 文件。 IronPDF 提供了如附加頁面、拆分文檔等功能。

PDF 安全

通過使用密碼加密或應用數字簽名來保護您的 PDF 文件。 IronPDF 提供了選項，讓您可以保護您的敏感文檔免遭未授權訪問。

高質量輸出

生成高質量的 PDF 文檔，精確呈現文本、圖像和格式。 IronPDF 確保您的生成的 PDF 維持原內容的忠實度。

跨平臺兼容性

IronPDF 與各種平台兼容，包括 Windows、Linux 和 macOS，使其適合多種開發環境。

簡單集成

輕鬆將 IronPDF 集成到您的 Node.js 應用程序中，使用其 npm 包。 API 文檔詳實，使得在您的項目中集成 PDF 生成功能變得直觀簡單。

安裝

要安裝IronPDF的NPM包，請使用以下命令：

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

使用IronPDF生成PDF文件並使用Prettier NPM包

安裝依賴項：首先，使用以下命令創建一個新的 Next.js 專案（如果尚未創建）。 參考 Next.js 設置頁面

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

接下來，導航到您的項目目錄：

cd reacthookform-pdf
cd reacthookform-pdf
SHELL

安裝所需的包：

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

創建 PDF

現在，讓我們創建一個簡單的示例來生成使用 IronPDF 的 PDF。

PDF 生成 API：第一步是創建一個後端 API 來生成 PDF 文件。 由於 IronPDF 僅在服務器端運行，我們需要創建一個 API 以在用戶希望生成 PDF 時調用。 在路徑 pages/api/pdf.js 中創建一個文件並添加以下內容。

IronPDF 需要一個許可證密鑰，您可以從 許可證頁面獲取，並將其放置在以下代碼中。

// 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;

    // Define HTML content for the PDF
    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>";

    // Generate PDF from HTML
    const pdf = await PdfDocument.fromHtml(content);
    const data = await pdf.saveAsBuffer();

    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;

    // Define HTML content for the PDF
    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>";

    // Generate PDF from HTML
    const pdf = await PdfDocument.fromHtml(content);
    const data = await pdf.saveAsBuffer();

    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

現在修改 index.js。

import Head from "next/head";
import styles from "../styles/Home.module.css";
import React from "react";
import { useForm } from "react-hook-form";

export default function Home() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  // Handle form submission to generate PDF
  const onSubmit = (data) => {
    generatePdf(data);
  };

  // Function to generate PDF by calling the backend API
  const generatePdf = async (data) => {
    try {
      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);
    }
  };

  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>
            <input {...register("firstName", { required: true })} />
            {errors.firstName && <span>This field is required</span>}
          </div>
          <div>
            <label>Last Name</label>
            <input {...register("lastName", { required: true })} />
            {errors.lastName && <span>This field is required</span>}
          </div>
          <div>
            <label>Email</label>
            <input {...register("email", { required: true, pattern: /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/ })} />
            {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 from "react";
import { useForm } from "react-hook-form";

export default function Home() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  // Handle form submission to generate PDF
  const onSubmit = (data) => {
    generatePdf(data);
  };

  // Function to generate PDF by calling the backend API
  const generatePdf = async (data) => {
    try {
      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);
    }
  };

  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>
            <input {...register("firstName", { required: true })} />
            {errors.firstName && <span>This field is required</span>}
          </div>
          <div>
            <label>Last Name</label>
            <input {...register("lastName", { required: true })} />
            {errors.lastName && <span>This field is required</span>}
          </div>
          <div>
            <label>Email</label>
            <input {...register("email", { required: true, pattern: /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/ })} />
            {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

代碼解釋

  1. 使用 React Hook Form 庫創建一個 React 表單視圖以輸入名字、姓氏和電子郵件。
  2. 創建一個 API 以接受用戶輸入並使用 IronPDF 庫生成 PDF。
  3. 在 index.js 文件中，當用戶點擊提交按鈕時，“生成 PDF”按鈕會調用後端 API 生成 PDF。

輸出

PDF

react hook form NPM（對開發人員的運作方式）：圖 5 - PDF 輸出

IronPDF 許可證

每個用戶的 IronPDF npm 套件使用授權密鑰運行。 IronPDF 提供 免費試用 授權，允許用戶在購買前檢查其豐富的功能。

在此處放置授權密鑰後才能使用 IronPDF 套件：

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

結論

React Hook Form 是一個多功能且高效的庫，用於處理 React 中的表單。 其簡單性、性能和靈活性使其成為簡單和複雜表單的絕佳選擇。 無論您是在構建小型專案還是大型應用程式，React Hook Form 都可以幫助您輕鬆管理表單。 IronPDF 脫穎而出，成為 .NET 開發人員需要以程式化方式處理 PDF 文件的強大解決方案。 其豐富的功能集，包括從各種格式創建 PDF、合併和編輯等操作能力、安全選項、表單創建和格式轉換，簡化了將 PDF 功能集成到 .NET 應用程式中的過程。 其易於使用的 API 和多功能性使其成為在開發專案中高效管理 PDF 任務的寶貴工具。

Darrius Serrant
Darrius Serrant
  立即與工程團隊聊天
全棧軟件工程師 (WebOps)

Darrius Serrant 擁有邁阿密大學計算機科學學士學位，目前任職於 Iron Software 的全栈 WebOps 市場營銷工程師。從小就迷上編碼，他認為計算既神秘又可接近，是創意和解決問題的完美媒介。

在 Iron Software，Darrius 喜歡創造新事物，並簡化複雜概念以便於理解。作為我們的駐場開發者之一，他也自願教學生，分享他的專業知識給下一代。

對 Darrius 來說，工作令人滿意因為它被重視且有實際影響。

相關文章

30 天試用→完整產品。無限制。無需信用卡。 開始免費試用