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

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

我們將要建立的表單

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

認(rèn)識工具

讓我們看看我們將用來建立和管理表單的堆疊。

React 和 Wasp

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

React Hook 表單

• 用於在 React 中製作表單的輕量級程式庫，主要透過其 useForm 鉤子。
• 處理表單驗證、錯誤管理，並提供靈活的驗證方法以及與各種 UI 元件庫的整合。

佐德

• TypeScript-first 驗證庫，用於建立詳細(xì)的、可重複使用的驗證模式。
• 與 TypeScript 類型整合以保持驗證統(tǒng)一並避免重複。

Shadcn/UI

• 直接嵌入到專案中的可重複使用 UI 元件的集合，允許開發(fā)人員僅採用他們需要的內(nèi)容並自訂這些元件。
• 提供對 React Hook Form 和 Zod 的內(nèi)建支援。

這是一個範(fàn)例片段，展示了 Shadcn 庫中的表單欄位：

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

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

讓我們建立一個簡單的使用者儀表板

我們將用來示範(fàn)基本表單的應(yīng)用程式是一個具有基本 CRUD 操作的管理面板。它將包括電子郵件和密碼身份驗證，並由兩個頁面組成：一個顯示所有用戶表的主螢?zāi)唬约耙粋€用戶創(chuàng)建頁面，這將是本文的重點(diǎn)。

我們的表單將包括驗證，以確保使用者在不符合指定要求的情況下無法提交表單（即建立新使用者）。 User 物件是驗證範(fàn)例的絕佳候選者，因為它包含適合不同驗證的各種資料類型：字串、日期（例如出生日期）、電子郵件字串和布林值（例如高級使用者狀態(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。此範(fàn)本附帶現(xiàn)成的元件和驗證路由，包括登入和註冊畫面。它還提供了有關(guān) Wasp 中 CRUD 操作如何運(yùn)作的可靠範(fàn)例，如果您是該框架的新手，它是理想的選擇。此外，我們將利用新的 Wasp TypeScript SDK 來管理我們的配置，因為它提供了擴(kuò)充的客製化靈活性。

覺得這篇文章有用嗎？

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

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

?? 謝謝您的支持？

將它們放在一起 - Zod schema React Hook Form 實(shí)例佈局

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

對於額外的驗證，日期不能設(shè)定為未來的日期，且 premiumUser 欄位只需為布林值即可。 Zod 也提供預(yù)設(shè)的驗證錯誤訊息，但這些訊息可以自訂。例如，我們可以指定名稱：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)有客戶，因此我們將傳遞必要的資料作為輸入。對於新客戶，使用一些合理的預(yù)設(shè)值；對於現(xiàn)有客戶，從資料庫中檢索資料。除了設(shè)定預(yù)設(shè)值和決定是否呼叫 createCustomer 或 updateCustomer 之外，表單處理的所有其他方面都保持不變。

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

最後一步是建立表單本身並將其組裝到 TSX 檔案中。如前所述，這個過程很簡單。無論我們使用文字輸入、日期選擇器還是帶有 Shadcn 控制項的複選框，我們都遵循類似的結(jié)構(gòu)：

• 先建立 FormField 元素並設(shè)定其控制項、名稱和渲染屬性。
• 渲染屬性是關(guān)鍵，因為它包含表單元素本身。
• 通常，我們將所有內(nèi)容包裝在 FormItem 中，為標(biāo)籤添加 FormLabel，並使用適當(dāng)?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ù)來增強(qiáng)您的應(yīng)用程式。

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

以上是使用 React Hook Form、Zod 和 Shadcn 輕鬆建立 React Form的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！