Balastrong 教程

TanStack Form 的维护者 Balastrong 创建了一系列视频教程,展示了该库最相关的功能。您会从中找到分步指南,这些指南能让您更深入地了解可以使用 TanStack Form 构建什么,并提供一些实用技巧。

观看完整播放列表

1. 设置与验证

学习 TanStack Form 的第一步是掌握所有基础知识,从设置库到创建一个带有文本字段和验证(同步、防抖和异步)的简单表单。观看视频 (8:16)

2. 高级验证

一个通过后端 API 验证数据的示例,同时通过控制加载状态、错误消息和关联字段来确保流畅的用户体验。观看视频 (8:05)

3. 数组字段

如何处理带有基本类型(字符串、数字)和对象(嵌套字段)的数组字段,包括验证和重新排序。观看视频 (6:53)

4. 响应式

了解表单值为何可能不会实时更新,为何此行为是设计意图,以及如何高效地触发 UI 更新。观看视频 (4:26)

5. 使用 Schema 库进行表单验证

使用像 zod、yup 或 valibot 这样的 Schema 库来定义您的 Schema 和验证规则。通过适配器将其传递给 TanStack Form,以一次性验证所有字段。观看视频 (6:29)

6. 副作用与监听器

与字段验证器类似,您可以将事件附加到字段监听器并对其做出反应,例如,当一个字段所依赖的另一个字段发生变化时,重置该字段。观看视频 (5:50)

7. 用于大型表单的可组合字段

借助组合式 API,您可以创建可重用的、预绑定并连接到通用表单上下文的组件,从而大量减少应用程序中所有表单实例的重复代码。这对于包含许多字段的大型表单尤其有用。观看视频 (11:01)