SuperAPI AI 工具集

react-hook-form-zod-shadcn

前端与建站

查看项目

更新于 10-16 01:49

技能介绍

用途:在 React 项目中构建或重构表单,统一使用 React Hook Form 做状态管理、Zod 做 schema 校验、shadcn/ui 的 Field 组件做界面。

主要能力与规范:安装依赖 npm install react-hook-form@7.71.1 zod@4.3.6 @hookform/resolvers@5.2.2;表单组件文件顶部必须加 "use client";schema 定义在组件外部以提升性能,并用 z.infer 推导类型;使用 useForm 时配置 mode: "onChange" 实现实时校验,并提供与 schema 类型匹配的 defaultValues;每个表单用 React useId 生成一个唯一 ID,复用于各字段而非逐字段生成;提交按钮与字段在 form.formState.isSubmitting 时禁用,按钮还可在 !form.formState.isValid 时禁用;提交处理中用 safeParse 校验,失败时调用 form.trigger() 展示错误;提交成功后调用 form.reset()。

用法要点:使用 shadcn/ui 的 Field、FieldLabel、FieldError、FieldGroup 等组件配合 Controller 渲染字段,通过 fieldState.invalid 设置 data-invalid 与 aria-invalid。解析器需从 @hookform/resolvers/standard-schema 导入 standardSchemaResolver。

限制与说明:资料未提供适用平台、收费、效果等其它信息;参考文档指向 references/zod.md、references/shadcn-ui.md、references/react-hook-form.md。