react 19 form表单提交
import { useFormState } from "react-dom";
const [state, formAction] = useFormState(EmailPreQuestionFormAction, { errorMessage: "" });
form这里可以直接应用formAction自动获取表单数据
export async function EditQuestionFormAction(prevState: ActionState, formData: FormData): Promise<CommonState<Record<string, any>>> {
track('editQuestionForm');
const rawFormData = Object.fromEntries(formData);
const parsed = EditQuestionFormSchema.safeParse(rawFormData);
if (!parsed.success) {
return {
error: parsed.error.flatten().fieldErrors,
};
}
const resp = await PostAction<Record<string, any>>('/api/person/updatePersonById', rawFormData);
if (resp.errorMessage) {
return {
errorMessage: resp.errorMessage,
};
}
return resp
}
或者用 onSubmit方法提交
onSubmit={form.handleSubmit(onSubmit)}
const onSubmit = (data: z.infer<typeof EmailPreferenceFormSchema>) => {
const formData = new FormData()
formData.append('emailPreference', data.emailPreference)
formAction(formData)
}