Next.js 13新路由中使用Formik提交表单异常求助

问题根源 #

你的代码存在两个关键问题：

• 提交按钮同时绑定了onClick={handleLogin}和type="submit"，点击时会同时触发Formik的提交流程和原生表单的默认GET提交行为，后者会导致页面重定向并将表单参数附加到URL上。
• 原生表单默认使用GET方法提交，即便你定义了handleLogin，默认的提交行为也没有被正确阻止。

解决方案 #

1. 移除按钮的onClick绑定：表单的onSubmit已经绑定了formik.handleSubmit，Formik会自动将表单值传递给你定义的handleLogin函数，无需额外在按钮上绑定点击事件。
2. 依赖formik.handleSubmit接管提交流程：Formik的handleSubmit内部会自动调用event.preventDefault()，阻止原生表单的默认提交行为，避免页面重定向。

修改后的完整代码 #

'use client'

import Button from "@/components/Buttons";
import Input from "@/components/Inputs";
import AuthLayout from "@/layouts/AuthLayout";
import { useFormik } from "formik";
import { object, string } from "yup";

export default function Home() {

  const handleLogin = async (values: any) => {
    console.log('values: ', values);
  };

  const validationSchema = object().shape({
    phone: string().required('Phone is required'),
  });

  const formik = useFormik({
    initialValues: {
      phone: '',
    },
    validationSchema: validationSchema,
    onSubmit: handleLogin
  })

  return (
    <AuthLayout className="md:max-w-md">
      <form onSubmit={formik.handleSubmit}>
        <Input.Primary
          type='text'
          name='phone'
          id='phone'
          placeholder='Enter Phone'
          wrapperStyle='!p-2'
          value={formik.values.phone}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          error={!!formik.errors.phone}
          autoComplete='tel'
        />

        <Button.Primary
          className='w-full'
          type='submit'>
          Login
        </Button.Primary>
      </form>
    </AuthLayout>
  )
}

额外说明 #

如果尝试不使用<form>标签，需要将按钮的type改为button，并在onClick中直接调用formik.handleSubmit()，示例如下：

<Button.Primary
  className='w-full'
  type='button'
  onClick={formik.handleSubmit}>
  Login
</Button.Primary>

这种方式也能避免原生表单的默认提交行为，但推荐使用<form>标签配合Formik的标准流程，更符合HTML语义化。

内容的提问来源于stack exchange，提问作者Platinum