使用 React Hook Form、Zod 和 Shadcn 轻松构建 React Form

表单是每个开发人员都会遇到的东西，无论是作为用户还是开发人员。它们在大多数网站上都是必不可少的，但它们的复杂性可能差别很大——从简单的 3 字段联系表单到 giga-monster-t-rex、具有 150 个字段的多页表单、动态验证和异步检查。

在这篇文章中，我们将探索如何使用 React Hook Form、Zod 和 Shadcn 创建一个适应性强、开发人员友好的解决方案，轻松处理各种表单需求。

我们将要构建的表单

这是我们将在这篇文章中开发的表单。我计划写另一篇关于表单高级使用的文章，后续将更加复杂，敬请期待？

认识工具

让我们看看我们将用来构建和管理表单的堆栈。

React 和 Wasp

• 框架：Wasp（React、Node.js 和 Prisma 的全栈框架）。
• 使用 React 实现快速、高效的全栈 Web 开发和部署。

React Hook 表单

• 用于在 React 中制作表单的轻量级库，主要通过其 useForm 钩子。
• 处理表单验证、错误管理，并提供灵活的验证方法以及与各种 UI 组件库的集成。

佐德

• TypeScript-first 验证库，用于创建详细的、可重用的验证模式。
• 与 TypeScript 类型集成以保持验证统一并避免重复。

Shadcn/UI

• 直接嵌入到项目中的可重用 UI 组件的集合，允许开发人员仅采用他们需要的内容并自定义这些组件。
• 提供对 React Hook Form 和 Zod 的内置支持。

这是一个示例片段，展示了 Shadcn 库中的表单字段：

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

即使您更喜欢使用不同风格的堆栈，只要您坚持使用 React 和 RHF，这仍然是一个可以帮助您继续前进的有效示例。

让我们构建一个简单的用户仪表板

我们将用来演示基本表单的应用程序是一个具有基本 CRUD 操作的管理面板。它将包括电子邮件和密码身份验证，并由两个页面组成：一个显示所有用户表的主屏幕，以及一个用户创建页面，这将是本文的重点。

我们的表单将包括验证，以确保用户在不满足指定要求的情况下无法提交表单（即创建新用户）。 User 对象是验证示例的绝佳候选者，因为它包含适合不同验证的各种数据类型：字符串、日期（例如出生日期）、电子邮件字符串和布尔值（例如高级用户状态）。完整的 Prisma 架构文件如下所示。

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

为了快速启动我们的项目，我们将使用带有 TypeScript 的预定义 Wasp 模板，称为 todo-ts。该模板附带现成的组件和身份验证路由，包括登录和注册屏幕。它还提供了有关 Wasp 中 CRUD 操作如何工作的可靠示例，如果您是该框架的新手，它是理想的选择。此外，我们将利用新的 Wasp TypeScript SDK 来管理我们的配置，因为它提供了扩展的定制灵活性。

觉得这篇文章有用吗？

Wasp 团队正在努力创建这样的内容，更不用说构建一个现代的开源 React/NodeJS 框架了。

表达支持的最简单方法就是给 Wasp 仓库加注星标！ ？但如果您可以查看存储库（用于贡献，或只是测试产品），我们将不胜感激。点击下面的按钮给Wasp一颗星并表示您的支持！

⭐️ 谢谢您的支持？

将它们放在一起 - Zod schema React Hook Form 实例布局

为了使用表单，我们首先定义 Zod 验证模式。我们的表单具有三种数据类型：字符串、日期和布尔值。我们将对大多数字段应用验证：姓名是必需的，而电子邮件则使用内置的电子邮件验证。 Zod 通过针对不同类型（例如电子邮件、URL 和 UUID）的内置验证简化了常见字符串类型的验证，这对我们的电子邮件领域很有帮助。

对于额外的验证，日期不能设置为未来的日期，并且 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 钩子管理，它提供了广泛的选项来处理和验证表单值、检查错误和管理表单状态。为了集成我们的 Zod 验证模式，我们将使用 Zod 解析器，允许 React Hook Form 应用我们之前定义的验证。

表单的defaultValues源自客户对象。由于该组件用于添加新客户和编辑现有客户，因此我们将传递必要的数据作为输入。对于新客户，使用一些合理的默认值；对于现有客户，从数据库中检索数据。除了设置默认值和确定是否调用 createCustomer 或 updateCustomer 之外，表单处理的所有其他方面都保持不变。

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

最后一步是创建表单本身并将其组装到 TSX 文件中。如前所述，这个过程很简单。无论我们使用文本输入、日期选择器还是带有 Shadcn 控件的复选框，我们都遵循类似的结构：

• 首先创建 FormField 元素并设置其控件、名称和渲染属性。
• 渲染属性是关键，因为它包含表单元素本身。
• 通常，我们将所有内容包装在 FormItem 中，为标签添加 FormLabel，并使用适当的值和 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(),
  });

如果您想查看完整的应用程序，请查看此处的 GitHub 存储库：GitHub Repo。我希望本文使表单的使用变得更加容易，如果您对更多与表单相关的内容感兴趣，请继续关注第二部分！在下一部分中，我们将深入研究高级模式和验证技术来增强您的应用程序。

如果您喜欢这篇文章，请考虑在 GitHub 上为 Wasp 加星标！您的支持帮助我们继续为每个人提供更轻松、更顺畅的 Web 开发。 ？

以上是使用 React Hook Form、Zod 和 Shadcn 轻松构建 React Form的详细内容。更多信息请关注PHP中文网其他相关文章！