1. IronPDF for Node.js
  2. IronPDF for Node.js 部落格
  3. 節點幫助
  4. react hook form NPM
節點幫助

react hook form NPM（如何為開發人員工作）

Darrius Serrant
Darrius Serrant
2024年10月24日
分享:

介紹

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

基本用法

讓我們使用 React Hook Form 創建一個簡單的註冊表單，不使用受控組件和子組件。

  1. 導入 useForm 鉤子：
import { useForm } from "react-hook-form";
JAVASCRIPT
  1. 初始化掛鉤：
const { register, handleSubmit, formState: { errors } } = useForm();
JAVASCRIPT
  1. 建立表單，包含一個輸入值和一個用於驗證失敗的錯誤對象：
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

輸出

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();
  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

輸出

react hook form NPM（對開發者的工作原理）：圖2 - Material UI 表單輸出

  1. 自訂驗證：
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

輸出

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，這使得它適合廣泛的開發環境。

簡單整合

輕鬆使用其 npm 套件將 IronPDF 集成到您的 Node.js 應用程式中。 API 有完善的文檔，使將 PDF 生成功能融入您的項目變得簡單明瞭。

安裝

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

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

使用 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"

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

cd reacthookform-pdf

安裝所需的軟體包：

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

建立 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;
    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

現在修改 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>
  );
}
JAVASCRIPT

程式碼說明

  1. 使用 React Hook Form 庫創建一個 React 表單視圖，來輸入名字、姓氏和電子郵件。

  2. 使用IronPDF庫創建一個API來接收用戶輸入並生成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 是一個強大的解決方案，特別適合需要以程式方式處理 PDF 文件的 .NET 開發人員。 IronPDF 擁有廣泛的功能集，包括從各種格式創建 PDF、合併和編輯等操作功能、安全選項、表單創建和格式轉換，使得 PDF 功能的整合進入 .NET 應用程式變得更加高效。 其用戶友好的 API 和多功能性使其成為在開發項目中高效管理 PDF 任務的寶貴工具。

Darrius Serrant
Darrius Serrant
  立即與工程團隊聊天
全端軟體工程師（WebOps）

Darrius Serrant 擁有邁阿密大學的計算機科學學士學位，目前擔任 Iron Software 的全端 WebOps 行銷工程師。自幼對編程產生興趣，他認為計算機既神秘又易於接觸，使其成為創造力和解決問題的完美媒介。

在 Iron Software，Darrius 享受創造新事物並簡化複雜概念使其更易理解的過程。作為我們的其中一位常駐開發人員，他也自願教導學生，將他的專業知識傳授給下一代。

對 Darrius 來說，他的工作之所以令人滿足，是因為它受到重視並且產生了真正的影響。

< 上一頁
rxjs NPM（它如何為開發者運作）
下一個 >
faye NPM（對開發者的運作方式）

使用 npm 安裝

版本：2025.3

> npm i @ironsoftware/ironpdf

報告問題

準備開始了嗎？ 版本： 2025.3 剛剛發布

免費開始
npm 下載 開始免費試用
查看許可證 >
Textlogo Iron Suite related to react hook form NPM（如何為開發人員工作）

IronPDF 是 IRON 的一部分套件

10 .NET API 產品適用於您的辦公文檔

以兩件產品的價格獲得十件產品   開始免費試用