开始使用 TanStack Form 的最低要求是创建一个表单并添加一个字段。请注意，此示例尚不包含任何验证或错误处理...。
<!-- 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 的所有其他功能了！
您每周的 JavaScript 新闻。每周一免费发送给超过 10 万名开发者。