SuperAPI AI 工具集

tanstack-form

前端与建站

查看项目

更新于 10-15 21:41

技能介绍

用途:面向 React 的 TanStack Form 最佳实践指南,帮助以类型安全方式管理表单、校验、字段组合与提交。

环境与安装:需 React 18.0+、TypeScript 5.0+,版本为 @tanstack/react-form@latest。安装命令:npm install @tanstack/react-form。开发工具安装:npm install -D @tanstack/react-devtools @tanstack/react-form-devtools。

主要能力:用 useForm 创建表单,从 defaultValues 推断类型;form.Field 通过 children 渲染字段并处理值、失焦与变更;form.Subscribe 配合 selector 订阅 canSubmit、isSubmitting 等状态切片;支持 Zod/Valibot/ArkType 等 Schema 校验、数组字段、联动字段(如确认密码)、监听器副作用、SSR/元框架服务端校验,以及无头 UI 库集成。生产环境推荐用 createFormHook 预绑定可复用组件以减少样板代码。

关键规则:不要给 useForm 传泛型,改用带类型的 defaultValues;提交时先 e.preventDefault() 与 e.stopPropagation() 再调用 form.handleSubmit();用 useStore(form.store, selector) 或 form.Subscribe 而非 useField 做响应式;异步校验需设置防抖;不要依赖 onSubmit 中已转换的值,需手动解析;避免用 type="reset",改用 form.reset()。

限制:资料未提供具体收费、价格、平台支持范围与效果数据。