SuperAPI AI 工具集

form-react

前端与建站

查看项目

更新于 10-15 17:24

技能介绍

用途:为 React 应用提供开箱可用的生产级表单模式与代码示例,帮助开发者快速搭建带校验、错误提示和可访问性处理的表单。默认推荐 React Hook Form + Zod;当需要跨框架组件库、严格受控组件、较强异步校验(如用户名查重)或 React Native 时,改用 TanStack Form。

主要能力:涵盖基础表单、可复用 FormField 组件、FormProvider 嵌套组件、useWatch 实时监听、条件字段、异步校验(如用户名查重)、表单重置、useFieldArray 动态数组字段。TanStack Form 部分包含基本表单、带防抖的异步校验、联动字段(如确认密码)。通用模式包括服务端错误处理、加载状态、聚焦首个错误。

使用方式:默认安装命令为 npm install react-hook-form @hookform/resolvers zod;用 zodResolver 接入 Zod schema,采用 mode: 'onBlur' 首次失焦校验、reValidateMode: 'onChange' 实时纠错。TanStack Form 使用 @tanstack/react-form 与 @tanstack/zod-form-adapter。

适用场景:登录、注册、结算、编辑资料、团队成员等动态表单,可与 form-validation、form-accessibility、form-security 等技能组合使用。

限制:资料未提供具体性能数据、收费信息与平台兼容性细节;选型表中的性能与体积描述仅为资料原述,未给出实测依据;React Native 对 React Hook Form 需额外变通处理。