IRONSOFTWAREHOME
IRONSUITE所有10個程式庫只需支付2個的價格
聯絡銷售
按公司
NODE 說明

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

Curtis Chau
Curtis Chau
Updated: 2026年4月21日

React Hook Form是一個強大且高效的程式庫，用於管理React應用程式中的表單值。 它利用React hooks，提供流暢且高效的體驗，無需任何控制元件。 在本文中，我們將探討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
SHELL

基本用法

讓我們建立一個簡單的註冊表單，使用React Hook Form，不需要控制元件和子元件。

  1. 匯入useForm Hook：
import { useForm } from "react-hook-form";
JavaScript
  1. 初始化Hook：
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>
  );
}
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>
  );
}
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>
  );
}
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，適合多種開發環境。

簡單整合

using npm 套件輕鬆將 IronPDF 整合到您的 Node.js 應用中。 API 文件完善，便於在您的專案中加入 PDF 生成功能。

安裝

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

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"
SHELL

接下來，導航至您的專案目錄：

cd reacthookform-pdf
SHELL

安裝所需的套件：

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

建立 PDF

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

**PDF生成API：**第一步是建立一個後端API來生成PDF文件。 由於 IronPDF 僅運行在伺服器端，我們需要建立一個使用者想要生成 PDF 時可以調用的 API。 在路径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();
  }
}
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>
  );
}
JavaScript

程式碼解釋

  1. 建立一個React表單視圖，使用React Hook Form程式庫接收名字、姓氏和電子郵件。
  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";
JavaScript

結論

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

Curtis Chau
Curtis Chau
Technical Writer

Curtis Chau holds a Bachelor’s degree in Computer Science (Carleton University) and specializes in front-end development with expertise in Node.js, TypeScript, JavaScript, and React. Passionate about crafting intuitive and aesthetically pleasing user interfaces, Curtis enjoys working with modern frameworks and creating well-structured, visually appealing manuals.

...
Read More

Related Articles

Key in blue circle

立即免費取得 30 天試用金鑰。

bullet_checked無需信用卡或建立帳號
  • Logo Aetna
  • Logo NASA
  • Logo GE
  • Logo Porsche
  • Logo USDA
  • Logo Qatar
Join Millions of Engineers who’ve tried IronPDF
預訂您的免費線上演示
Booking Badge related to IronPDF Product Demo

獲得來自全球數百萬工程師的信賴

Iron Software的客戶徽標
獲取您的無義務諮詢
填寫以下表格或發送電子郵件至sales@ironsoftware.com
您的資料將始終保密。
獲得來自全球數百萬工程師的信賴
Iron Software的客戶徽標
立即獲取您的30天試用金鑰。
無需信用卡或帳戶建立