SuperAPI AI 工具集

tanstack-form

前端与建站

查看项目

更新于 10-15 21:11

技能介绍

用途:当工作涉及 TanStack Form v1(npm latest),尤其是 @tanstack/react-form 的表单状态、校验、可复用应用表单 hook、SSR 适配器、从临时 React 表单处理迁移,或规划迁移到 v2 alpha 时使用本技能。

主要能力:先检查本地表单栈,包括 @tanstack/react-form、@tanstack/form-core、SSR 适配器、devtools、React、schema 库、UI 库与测试工具的版本;识别表单模式(一次性 useForm、全局 createFormHook、嵌套 withForm、可复用 withFieldGroup、SSR 适配器表单或 React Native);明确校验意图(字段级、表单级、Standard Schema、异步校验器、动态重新校验、服务端校验或提交时错误);确认渲染契约(受控字段、标签、错误展示、焦点管理、提交状态与无障碍预期)。

使用方式:行为或版本重要时刷新当前文档与包证据,从 source-map.md 开始。安装、核心 API、useForm、form.Field、createFormHook、应用字段、订阅、异步默认值与 UI 库接线见 setup-core.md;字段/表单校验器、Standard Schema、异步校验、动态校验、服务端错误、自定义错误、提交元数据与转换值见 validation-state.md;大型表单、可复用应用表单 hook、withForm、withFieldGroup、数组、FormGroup、联动字段与监听器见 composition-arrays-groups.md;TanStack Start、Next.js App Router、Remix、服务端校验、devtools、调试、无障碍与生产检查见 ssr-production.md。仅当仓库安装 2.0.0-alpha.* 或用户询问 Form v2 时使用 v2-alpha.md,不要将 v2 模式用于 v1 代码。

实现判断:优先从 defaultValues 或共享 formOptions 推断类型;小型或一次性表单用普通 useForm 加 form.Field,产品表单与设计系统集成优先 createFormHook;字段视为受控字段,显式接线 value、onBlur、onChange;有意识地订阅,UI 片段用 form.Subscribe,组件逻辑用 useSelector(form.store, selector),避免整库订阅;校验时机按 UX 选择 onChange、onBlur、onSubmit、onMount、onDynamic 与异步校验器;Standard Schema 校验输入值,不把转换输出交给 onSubmit,需要转换输出时在 onSubmit 内解析;跨字段校验用 onChangeListenTo 或 onBlurListenTo,副作用用监听器;多步表单需要单一最终提交值与共享校验状态时优先 FormGroup;SSR 框架中通过适配器 formOptions 共享表单形状,用 createServerValidate 做服务端校验,并用 mergeForm 加 useTransform 合并返回状态。

验证:优先使用仓库现有检查,包括类型检查、针对校验时机/异步防抖/提交错误/数组变更/联动字段/监听器副作用/重置默认行为的聚焦测试、受控输入与错误渲染的浏览器冒烟测试、SSR/action 测试,以及状态疑似陈旧时的 devtools 或调试检查。表单状态除非显式订阅,否则非响应式。

限制:资料未提供具体收费、价格、平台支持范围或效果保证,相关事实暂未提供。