在您想要有多种表单提交类型的情况下，例如，一个表单有一个按钮导航到子表单，另一个按钮处理标准提交，您可以利用 onSubmitMeta 属性和 handleSubmit 函数重载。
首先，您必须定义 form.onSubmitMeta 属性的默认状态
const form = useForm({
defaultValues: {
firstName: 'Rick',
},
// {} is the default value passed to `onSubmit`'s `meta` property
onSubmitMeta: {} as { lastName: string },
onSubmit: async ({ value, meta }) => {
// Do something with the values passed via handleSubmit
console.log(`${value.firstName} - ${meta}`)
},
})
const form = useForm({
defaultValues: {
firstName: 'Rick',
},
// {} is the default value passed to `onSubmit`'s `meta` property
onSubmitMeta: {} as { lastName: string },
onSubmit: async ({ value, meta }) => {
// Do something with the values passed via handleSubmit
console.log(`${value.firstName} - ${meta}`)
},
})
注意：onSubmitMeta 的默认状态是 never，因此如果未提供该属性，并且您尝试在 handleSubmit 或 onSubmit 中访问它，则会报错。
然后，当您调用 onSubmit 时，您可以像这样提供预定义的元数据
<form
onSubmit={(e) => {
e.preventDefault()
e.stopPropagation()
form.handleSubmit({
lastName: 'Astley',
})
}}
></form>
<form
onSubmit={(e) => {
e.preventDefault()
e.stopPropagation()
form.handleSubmit({
lastName: 'Astley',
})
}}
></form>
您的每周 JavaScript 新闻。每周一免费发送给超过 100,000 名开发者。