快速开始
要开始使用 TanStack Form，最基本的就是创建一个表单并添加一个字段。请注意，此示例尚未包含任何验证或错误处理。
vue
<!-- App.vue -->
<script setup>
import { useForm } from '@tanstack/vue-form'
const form = useForm({
defaultValues: {
fullName: '',
},
onSubmit: async ({ value }) => {
// Do something with form data
console.log(value)
},
})
</script>
<template>
<div>
<form @submit.prevent.stop="form.handleSubmit">
<div>
<form.Field name="fullName">
<template v-slot="{ field }">
<input
:name="field.name"
:value="field.state.value"
@blur="field.handleBlur"
@input="(e) => field.handleChange((e.target as HTMLInputElement).value)"
/>
</template>
</form.Field>
</div>
<button type="submit">Submit</button>
</form>
</div>
</template>
<!-- App.vue -->
<script setup>
import { useForm } from '@tanstack/vue-form'
const form = useForm({
defaultValues: {
fullName: '',
},
onSubmit: async ({ value }) => {
// Do something with form data
console.log(value)
},
})
</script>
<template>
<div>
<form @submit.prevent.stop="form.handleSubmit">
<div>
<form.Field name="fullName">
<template v-slot="{ field }">
<input
:name="field.name"
:value="field.state.value"
@blur="field.handleBlur"
@input="(e) => field.handleChange((e.target as HTMLInputElement).value)"
/>
</template>
</form.Field>
</div>
<button type="submit">Submit</button>
</form>
</div>
</template>
从这里开始，您就可以探索 TanStack Form 的所有其他功能了！
我们的合作伙伴
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。