表單是每個開發(fā)人員都會遇到的東西，無論是作為用戶還是開發(fā)人員。它們在大多數(shù)網(wǎng)站上都是必不可少的，但它們的復(fù)雜性可能差別很大——從簡單的 3 字段聯(lián)系表單到 giga-monster-t-rex、具有 150 個字段的多頁表單、動態(tài)驗證和異步檢查。

在這篇文章中，我們將探索如何使用 React Hook Form、Zod 和 Shadcn 創(chuàng)建一個適應(yīng)性強、開發(fā)人員友好的解決方案，輕松處理各種表單需求。

我們將要構(gòu)建的表單

這是我們將在這篇文章中開發(fā)的表單。我計劃寫另一篇關(guān)于表單高級使用的文章，后續(xù)將更加復(fù)雜，敬請期待？

認識工具

讓我們看看我們將用來構(gòu)建和管理表單的堆棧。

React 和 Wasp

• 框架：Wasp（React、Node.js 和 Prisma 的全?？蚣埽?。
• 使用 React 實現(xiàn)快速、高效的全棧 Web 開發(fā)和部署。

React Hook 表單

• 用于在 React 中制作表單的輕量級庫，主要通過其 useForm 鉤子。
• 處理表單驗證、錯誤管理，并提供靈活的驗證方法以及與各種 UI 組件庫的集成。

佐德

• TypeScript-first 驗證庫，用于創(chuàng)建詳細的、可重用的驗證模式。
• 與 TypeScript 類型集成以保持驗證統(tǒng)一并避免重復(fù)。

Shadcn/UI

• 直接嵌入到項目中的可重用 UI 組件的集合，允許開發(fā)人員僅采用他們需要的內(nèi)容并自定義這些組件。
• 提供對 React Hook Form 和 Zod 的內(nèi)置支持。

這是一個示例片段，展示了 Shadcn 庫中的表單字段：

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

即使您更喜歡使用不同風(fēng)格的堆棧，只要您堅持使用 React 和 RHF，這仍然是一個可以幫助您繼續(xù)前進的有效示例。

讓我們構(gòu)建一個簡單的用戶儀表板

我們將用來演示基本表單的應(yīng)用程序是一個具有基本 CRUD 操作的管理面板。它將包括電子郵件和密碼身份驗證，并由兩個頁面組成：一個顯示所有用戶表的主屏幕，以及一個用戶創(chuàng)建頁面，這將是本文的重點。

我們的表單將包括驗證，以確保用戶在不滿足指定要求的情況下無法提交表單（即創(chuàng)建新用戶）。 User 對象是驗證示例的絕佳候選者，因為它包含適合不同驗證的各種數(shù)據(jù)類型：字符串、日期（例如出生日期）、電子郵件字符串和布爾值（例如高級用戶狀態(tài)）。完整的 Prisma 架構(gòu)文件如下所示。

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

為了快速啟動我們的項目，我們將使用帶有 TypeScript 的預(yù)定義 Wasp 模板，稱為 todo-ts。該模板附帶現(xiàn)成的組件和身份驗證路由，包括登錄和注冊屏幕。它還提供了有關(guān) Wasp 中 CRUD 操作如何工作的可靠示例，如果您是該框架的新手，它是理想的選擇。此外，我們將利用新的 Wasp TypeScript SDK 來管理我們的配置，因為它提供了擴展的定制靈活性。

覺得這篇文章有用嗎？

Wasp 團隊正在努力創(chuàng)建這樣的內(nèi)容，更不用說構(gòu)建一個現(xiàn)代的開源 React/NodeJS 框架了。

表達支持的最簡單方法就是給 Wasp 倉庫加注星標！ ？但如果您可以查看存儲庫（用于貢獻，或只是測試產(chǎn)品），我們將不勝感激。點擊下面的按鈕給Wasp一顆星并表示您的支持！

?? 謝謝您的支持？

將它們放在一起 - Zod schema React Hook Form 實例布局

為了使用表單，我們首先定義 Zod 驗證模式。我們的表單具有三種數(shù)據(jù)類型：字符串、日期和布爾值。我們將對大多數(shù)字段應(yīng)用驗證：姓名是必需的，而電子郵件則使用內(nèi)置的電子郵件驗證。 Zod 通過針對不同類型（例如電子郵件、URL 和 UUID）的內(nèi)置驗證簡化了常見字符串類型的驗證，這對我們的電子郵件領(lǐng)域很有幫助。

對于額外的驗證，日期不能設(shè)置為未來的日期，并且 premiumUser 字段只需為布爾值即可。 Zod 還提供默認的驗證錯誤消息，但這些消息可以自定義。例如，我們可以指定名稱：z.string().min(1, 'Name is required').
，而不是名稱：z.string().min(1)

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

我們的表單由 React Hook Form 中的 useForm 鉤子管理，它提供了廣泛的選項來處理和驗證表單值、檢查錯誤和管理表單狀態(tài)。為了集成我們的 Zod 驗證模式，我們將使用 Zod 解析器，允許 React Hook Form 應(yīng)用我們之前定義的驗證。

表單的defaultValues源自客戶對象。由于該組件用于添加新客戶和編輯現(xiàn)有客戶，因此我們將傳遞必要的數(shù)據(jù)作為輸入。對于新客戶，使用一些合理的默認值；對于現(xiàn)有客戶，從數(shù)據(jù)庫中檢索數(shù)據(jù)。除了設(shè)置默認值和確定是否調(diào)用 createCustomer 或 updateCustomer 之外，表單處理的所有其他方面都保持不變。

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

最后一步是創(chuàng)建表單本身并將其組裝到 TSX 文件中。如前所述，這個過程很簡單。無論我們使用文本輸入、日期選擇器還是帶有 Shadcn 控件的復(fù)選框，我們都遵循類似的結(jié)構(gòu)：

• 首先創(chuàng)建 FormField 元素并設(shè)置其控件、名稱和渲染屬性。
• 渲染屬性是關(guān)鍵，因為它包含表單元素本身。
• 通常，我們將所有內(nèi)容包裝在 FormItem 中，為標簽添加 FormLabel，并使用適當?shù)闹岛?setter 方法將受控表單元素放入 FormControl 中。
• 最后，我們在下面添加了 FormMessage，如果驗證失敗，它會顯示 Zod 驗證消息。

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

如果您想查看完整的應(yīng)用程序，請查看此處的 GitHub 存儲庫：GitHub Repo。我希望本文使表單的使用變得更加容易，如果您對更多與表單相關(guān)的內(nèi)容感興趣，請繼續(xù)關(guān)注第二部分！在下一部分中，我們將深入研究高級模式和驗證技術(shù)來增強您的應(yīng)用程序。

如果您喜歡這篇文章，請考慮在 GitHub 上為 Wasp 加星標！您的支持幫助我們繼續(xù)為每個人提供更輕松、更順暢的 Web 開發(fā)。 ？

以上是使用 React Hook Form、Zod 和 Shadcn 輕松構(gòu)建 React Form的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！