提问人:Platinum 提问时间:10/24/2023 更新时间:10/24/2023 访问量:95
在 NextJs 13 中使用 Formik
Using Formik in NextJs 13
问:
我正在尝试在 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>
在每种情况下,要么按钮单击不返回任何内容,要么只是执行重定向。
谢谢你的帮助。
答: 暂无答案
评论