在 NextJs 13 中使用 Formik

Using Formik in NextJs 13

提问人:Platinum 提问时间:10/24/2023 更新时间:10/24/2023 访问量:95

问:

我正在尝试在 NextJs 13 中使用 Formik 和新路由器。我很确定我的代码是正确的,但是,也许我弄错了什么,因为单击登录按钮只会重定向页面,并将表单数据附加到 url,就像 API get 请求一样。

我的代码:

'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'
          onClick={handleLogin}
          type='submit'>
          Login
        </Button.Primary>
      </form>
    </AuthLayout>
  )
}

我的设置:

{
  "name": "lender",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "formik": "^2.4.5",
    "next": "13.5.6",
    "react": "^18",
    "react-dom": "^18",
    "yup": "^1.3.2"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10",
    "postcss": "^8",
    "tailwindcss": "^3",
    "typescript": "^5"
  }
}

我已经尝试了上面所附的当前代码,我尝试使用组件而不是钩子。<Formik ></Formit>useFormik

我也尝试过像在我的 React Native 项目中那样使用它,那就是没有元素。<form>

在每种情况下,要么按钮单击不返回任何内容,要么只是执行重定向。

谢谢你的帮助。

表单 验证 formik next.js13

评论


答: 暂无答案