当我在电子邮件或密码框中输入一个值时,它会显示一个空白屏幕。基本上在使用Formik时
我应用了onchange函数,但是当我试图改变初始值时,它显示了一个错误。我试图弄清楚它。
登录页面:-
import React from "react";
import { Link } from "react-router-dom";
import { Formik, Form } from "formik";
import Input from "./Input";
import * as Yup from "yup";
export default function Login() {
const schema = Yup.object().shape({
email: Yup.string().email().required(),
password: Yup.string().min(8).required()
});
function Callloginapi(values) {
console.log("Sending at", values);
}
const initialvalues = {
email:"",
password:""
};
return (
<div>
<Formik
initialvalue={initialvalues}
validationSchema={schema}
onSubmit={Callloginapi}
validateOnMount
>
<Form className="bg-black brightness-50 p-1 px-4">
<div className="flex justify-center h-4/6 max-w-xl bg-indigo-400 brightness-100 my-28 m-auto p-4">
<div className="flex flex-col">
<h3 className="text-center text-black font-semibold text-2xl bold pt-2 m-2">
Login
</h3>
<div className="flex flex-col my-3 ">
<label className=" text-black font-semibold ">Email</label>
<Input
type="email"
id="email"
name="email"
placeholder="Email"
required
/>
</div>
<div className="flex flex-col my-3 ">
<label className=" text-black font-semibold">Password</label>
<Input
type="password"
id="password"
name="password"
placeholder="Password"
required
/>
</div>
<div className="flex my-3 ">
<input type="checkbox" />
<p className="text-black font-semibold px-2">Remember me</p>
</div>
<button className="border-white font-semibold border-2 text-black rounded-md hover:bg-white hover:font-bold hover:text-xl mx-10 my-2">
Login
</button>
<div className="flex gap-4 mt-2 space-x-3">
<Link
className="bg-white font-semibold text-black border-1 rounded-sm p-1 hover:bg-white hover:font-bold hover:text-xl flex items-center"
to="/"
>
New User?
</Link>
<Link
className="bg-white font-semibold text-black border-1 rounded-sm p-1 hover:bg-white hover:font-bold hover:text-xl flex items-center "
to="/"
>
{" "}
Google
</Link>
</div>
</div>
</div>
</Form>
</Formik>
</div>
);
}
输入页面:-
import { useField } from 'formik'
import React from 'react'
export default function Input({label,id,name,placeholder,required,...rest}) {
const field= useField(name);
const [data,meta]=field;
const {value,onBlur,onChange}=data;
const {touched,error}=meta;
return (
<div>
<label htmlFor={id}>{label}</label>
<input
id={id}
name={name}
value={value}
onBlur={onBlur}
onChange={onChange}
required={required}
placeholder={placeholder}
/>
{touched && error && <div className="text-red-700">{error}</div>}
</div>
)
}
错误显示:-未捕获的TypeError:无法读取未定义的属性(阅读“email”)
上述错误发生在Formik组件中:
1条答案
按热度按时间q3qa4bjr1#
您的错误是由于单词
initialValues
的拼写造成的。您写的是initialValue
。将其更改为:
致:
Formik将抛出另一个提交按钮错误。您需要添加
type="submit"
到登录按钮元素中