TanStack Form 是处理 Web 应用程序中表单的终极解决方案，提供了一种强大而灵活的表单管理方法。它专为一流的 TypeScript 支持、headless UI 组件和框架无关的设计而打造，可简化表单处理并确保在各种前端框架中获得无缝体验。
大多数 Web 框架并未提供全面的表单处理解决方案，这使得开发人员不得不创建自己的自定义实现或依赖功能较弱的库。这通常会导致缺乏一致性、性能不佳以及开发时间增加。TanStack Form 旨在通过提供一个功能强大且易于使用的表单管理一体化解决方案来应对这些挑战。
借助 TanStack Form，开发人员可以应对常见的表单相关挑战，例如：
通过为这些挑战提供完整的解决方案，TanStack Form 使开发人员能够轻松构建健壮且用户友好的表单。
在下面的示例中，您可以看到 TanStack Form 与 React 框架适配器一起使用的效果：
import * as React from 'react'
import { createRoot } from 'react-dom/client'
import { useForm } from '@tanstack/react-form'
import type { AnyFieldApi } from '@tanstack/react-form'
function FieldInfo({ field }: { field: AnyFieldApi }) {
return (
<>
{field.state.meta.isTouched && !field.state.meta.isValid ? (
<em>{field.state.meta.errors.join(', ')}</em>
) : null}
{field.state.meta.isValidating ? '校验中...' : null}
</>
)
}
export default function App() {
const form = useForm({
defaultValues: {
firstName: '',
lastName: '',
},
onSubmit: async ({ value }) => {
// 处理表单数据
console.log(value)
},
})
return (
<div>
<h1>简单表单示例</h1>
<form
onSubmit={(e) => {
e.preventDefault()
e.stopPropagation()
form.handleSubmit()
}}
>
<div>
{/* 一个类型安全的字段组件 */}
<form.Field
name="firstName"
validators={{
onChange: ({ value }) =>
!value
? '姓氏为必填项'
: value.length < 3
? '姓氏至少需要 3 个字符'
: undefined,
onChangeAsyncDebounceMs: 500,
onChangeAsync: async ({ value }) => {
await new Promise((resolve) => setTimeout(resolve, 1000))
return (
value.includes('error') && '姓氏中不允许出现 "error"'
)
},
}}
children={(field) => {
// 避免过早抽象。Render props 非常棒！
return (
<>
<label htmlFor={field.name}>姓氏：</label>
<input
id={field.name}
name={field.name}
value={field.state.value}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
/>
<FieldInfo field={field} />
</>
)
}}
/>
</div>
<div>
<form.Field
name="lastName"
children={(field) => (
<>
<label htmlFor={field.name}>名字：</label>
<input
id={field.name}
name={field.name}
value={field.state.value}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
/>
<FieldInfo field={field} />
</>
)}
/>
</div>
<form.Subscribe
selector={(state) => [state.canSubmit, state.isSubmitting]}
children={([canSubmit, isSubmitting]) => (
<button type="submit" disabled={!canSubmit}>
{isSubmitting ? '...' : '提交'}
</button>
)}
/>
</form>
</div>
)
}
const rootElement = document.getElementById('root')!
createRoot(rootElement).render(<App />)
import * as React from 'react'
import { createRoot } from 'react-dom/client'
import { useForm } from '@tanstack/react-form'
import type { AnyFieldApi } from '@tanstack/react-form'
function FieldInfo({ field }: { field: AnyFieldApi }) {
return (
<>
{field.state.meta.isTouched && !field.state.meta.isValid ? (
<em>{field.state.meta.errors.join(', ')}</em>
) : null}
{field.state.meta.isValidating ? '校验中...' : null}
</>
)
}
export default function App() {
const form = useForm({
defaultValues: {
firstName: '',
lastName: '',
},
onSubmit: async ({ value }) => {
// 处理表单数据
console.log(value)
},
})
return (
<div>
<h1>简单表单示例</h1>
<form
onSubmit={(e) => {
e.preventDefault()
e.stopPropagation()
form.handleSubmit()
}}
>
<div>
{/* 一个类型安全的字段组件 */}
<form.Field
name="firstName"
validators={{
onChange: ({ value }) =>
!value
? '姓氏为必填项'
: value.length < 3
? '姓氏至少需要 3 个字符'
: undefined,
onChangeAsyncDebounceMs: 500,
onChangeAsync: async ({ value }) => {
await new Promise((resolve) => setTimeout(resolve, 1000))
return (
value.includes('error') && '姓氏中不允许出现 "error"'
)
},
}}
children={(field) => {
// 避免过早抽象。Render props 非常棒！
return (
<>
<label htmlFor={field.name}>姓氏：</label>
<input
id={field.name}
name={field.name}
value={field.state.value}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
/>
<FieldInfo field={field} />
</>
)
}}
/>
</div>
<div>
<form.Field
name="lastName"
children={(field) => (
<>
<label htmlFor={field.name}>名字：</label>
<input
id={field.name}
name={field.name}
value={field.state.value}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
/>
<FieldInfo field={field} />
</>
)}
/>
</div>
<form.Subscribe
selector={(state) => [state.canSubmit, state.isSubmitting]}
children={([canSubmit, isSubmitting]) => (
<button type="submit" disabled={!canSubmit}>
{isSubmitting ? '...' : '提交'}
</button>
)}
/>
</form>
</div>
)
}
const rootElement = document.getElementById('root')!
createRoot(rootElement).render(<App />)