SuperAPI AI 工具集

tanstack-form

前端与建站

查看项目

更新于 10-16 02:35

技能介绍

TanStack Form 用于在 React 中构建表单,配合 React Aria Components 使用,适用于构建表单、实现校验、处理表单提交以及创建可复用字段。

安装:pnpm add @tanstack/react-form

两种使用模式。基础模式适合一次性表单,使用 useForm 与 form.Field,通过表单级 validators.onSubmit 接入 Zod 等 schema,字段渲染时读取 field.state.value、handleBlur、handleChange,并用 field.state.meta.isTouched 与 meta.isValid 控制错误展示。可组合模式适合可复用字段,流程为:用 createFormHookContexts 创建上下文,基于 useFieldContext 编写字段组件,再用 createFormHook 注册 fieldComponents 与 formComponents 得到 useAppForm,之后用 form.AppField 与 form.AppForm 组合使用。

校验支持表单级与字段级,字段级可配置 onChange、onChangeAsync 与 onChangeAsyncDebounceMs,并可用 onChangeListenTo 实现联动字段(如确认密码)的重新校验。表单状态提供 values、isSubmitting、isValid、isDirty,以及 reset() 与 handleSubmit()。

常见注意点:不要直接用 e.target.value,应调用 field.handleChange;需提供 onBlur={field.handleBlur};错误展示需检查 isTouched 与 errors 长度;输入需设置 id 与 aria-invalid 以兼顾可访问性;类型使用 type 而非 interface;使用 z.email() 而非已弃用的 z.string().email();客户端应先行校验。

文档另涉及字段组件与数组字段、服务端集成与 SSR、乐观更新、多步向导、文件上传等主题。具体版本要求、依赖范围及完整 API 细节暂未提供。