理念

每个成熟的项目都应该有一个指导其发展的哲学。没有核心的哲学，开发可能会陷入无休止的决策过程，并因此产生较弱的 API。

本文档概述了驱动 TanStack Form 开发和功能集的核心原则。

API 伴随着权衡。因此，人们很容易通过不同的 API 向用户提供每组权衡。然而，这可能会导致 API 碎片化，学习和使用起来更困难。

虽然这可能意味着更高的学习曲线，但它意味着您不必在内部权衡使用哪个 API，或者在 API 之间切换时具有更高的认知开销。

TanStack Form 的设计旨在灵活且可定制。虽然许多表单可能遵循相似的模式，但总有例外；特别是当表单是应用程序的核心组件时。

因此，TanStack Form 支持多种验证方法

• 时机自定义：您可以在失去焦点、更改、提交甚至挂载时进行验证。
• 验证策略：您可以对单个字段、整个表单或一组字段进行验证。
• 自定义验证逻辑：您可以编写自己的验证逻辑，或使用像 Zod 或 Valibot 这样的库。
• 自定义错误消息：您可以通过从验证器返回任何对象来为每个字段自定义错误消息。
• 异步验证：您可以异步验证字段，并为您处理诸如节流和取消等常用实用程序。

在受控与非受控输入是热门话题的世界里，TanStack Form 坚守受控阵营。

这带来了一些优势

• 可预测：您可以随时预测表单的状态。
• 更轻松的测试：您可以轻松地通过传递值并断言输出来测试您的表单。
• 非 DOM 支持：您可以将 TanStack Form 与 React Native、Three.js 框架适配器或任何其他框架渲染器一起使用。
• 增强的条件逻辑：您可以根据表单状态轻松地有条件地显示/隐藏字段。
• 调试：您可以轻松地将表单状态记录到控制台以调试问题。

您在使用 TanStack Form 时永远不需要传递泛型或使用内部类型。这是因为我们设计该库以从运行时默认值推断一切。

当编写足够正确的 TanStack Form 代码时，您应该无法区分 JavaScript 用法和 TypeScript 用法，除了您可能对运行时值进行的任何类型转换。

而不是

useForm<MyForm>()

useForm<MyForm>()

您应该做

interface Person {
  name: string
  age: number
}

const defaultPerson: Person = { name: 'Bill Luo', age: 24 }

useForm({
  defaultValues: defaultPerson,
})

interface Person {
  name: string
  age: number
}

const defaultPerson: Person = { name: 'Bill Luo', age: 24 }

useForm({
  defaultValues: defaultPerson,
})

TanStack Form 的主要目标之一是您应该将其包装到您自己的组件系统或设计系统中。

为了支持这一点，我们有许多实用程序，可以更轻松地构建自己的组件和自定义钩子

// Exported from your own library with pre-bound components for your forms.
export const { useAppForm, withForm } = createFormHook(/* options */)

// Exported from your own library with pre-bound components for your forms.
export const { useAppForm, withForm } = createFormHook(/* options */)

如果不这样做，您将为您的应用程序添加大量样板代码，并使您的表单在一致性和用户友好性方面变差。