[英]Formik not displaying on a nextjs page?
I have a "Login" component which has a div with Formik inside it, just some first-last name and email form, there are no errors but the Formik component isn't displaying at all, it is just an empty div, anything else works perfectly.我有一个“登录”组件,其中有一个带有 Formik 的 div,只有一些名字和 email 表单,没有错误,但 Formik 组件根本不显示,它只是一个空 div,其他完美运行。 Here's a piece of code, maybe I am missing something:
这是一段代码,也许我遗漏了一些东西:
import Link from "next/link";
import Head from "next/head";
import styles from "../styles/Home.module.css";
import Login from "../components/Login";
export default function Home() {
return (
<>
<Head>
<title>login page</title>
</Head>
<h1>hello</h1>
<Login />
</>
);
}
And the Login component itself:以及登录组件本身:
import { Formik } from "formik";
import { TextField } from "@material-ui/core";
const Login = () => {
return (
<div>
<Formik
initialValues={{ firstName: "", lastName: "", email: "" }}
onSubmit={data => {
console.log(data);
}}
>
{({ values, handleChange, handleBlur, handleSubmit }) => {
<form onSubmit={handleSubmit}>
<TextField
onChange={handleChange}
onBlur={handleBlur}
value={values.firstName}
/>
<TextField
onChange={handleChange}
onBlur={handleBlur}
value={values.lastName}
/>
<TextField
onChange={handleChange}
onBlur={handleBlur}
value={values.email}
/>
</form>;
}}
</Formik>
</div>
);
};
export default Login;
So the <h1>hello</h1>
is present on the page, and the empty div which is supposed to have that Login component inside it is present too.所以
<h1>hello</h1>
出现在页面上,并且应该在其中包含该 Login 组件的空 div 也存在。 What could the problem be?问题可能是什么? Maybe I am just blind and missing something simple or is there some sort of package problem?
也许我只是盲目并且缺少一些简单的东西,或者是否存在某种 package 问题?
You have to return the JSX inside your Formik
children callback.您必须在
Formik
子回调中返回 JSX。
{({ values, handleChange, handleBlur, handleSubmit }) => {
return (
<form onSubmit={handleSubmit}>
<!-- Rest of the form -->
</form>
);
}}
Or the shorthand syntax:或简写语法:
{({ values, handleChange, handleBlur, handleSubmit }) => (
<form onSubmit={handleSubmit}>
<!-- Rest of the form -->
</form>
)}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.