[英]“object Object” showing as input value with Formik forms on ReactJS
With Formik
, my input shows an [object Object]
value instead of behaving in a standard manner.使用
Formik
,我的输入显示一个[object Object]
值,而不是以标准方式表现。
import React from "react";
import ReactDOM from "react-dom";
import { Formik, Field, Form, ErrorMessage } from "formik";
import * as Yup from "yup";
import "./styles.css";
const SignupForm = () => {
return (
<Formik
initialValues={{ email: "" }}
validationSchema={Yup.object({
email: Yup.string()
.email("Mauvais e-mail")
.required("Champ requis")
})}
onSubmit={values => {
alert(JSON.stringify(values, null, 2));
}}
>
<Form>
<label htmlFor="email">Email</label>
<ErrorMessage name="email" />
<br />
<Field name="email" type="email" />
<button type="submit">OK</button>
</Form>
</Formik>
);
};
ReactDOM.render(<SignupForm />, document.querySelector("#root"));
Formik
matches the initial values to the name
of the field, not the id
. Formik
将初始值匹配到字段的name
,而不是id
。
Try using this as your Field
:尝试将此用作您的
Field
:
<Field name="email" id="email" type="email" />
import React from "react";
import ReactDOM from "react-dom";
import { Formik, Field, Form, ErrorMessage } from "formik";
import * as Yup from "yup";
import "./styles.css";
const SignupForm = () => {
return (
<Formik
initialValues={{ email: "" }}
validationSchema={Yup.object({
email: Yup.string()
.email("Mauvais e-mail")
.required("Champ requis")
})}
onSubmit={values => {
alert(JSON.stringify(values, null, 2));
}}
>
{props => (
<Form>
<label htmlFor="email">Email</label>
<ErrorMessage name="email" />
<br />
<Field
name="email"
id="email"
type="email"
onChange={e => {
props.setTouched({ email: true });
props.handleChange(e);
}}
/>
<button type="submit">OK</button>
</Form>
)}
</Formik>
);
};
ReactDOM.render(<SignupForm />, document.querySelector("#root"));
You can also check the docs for more info on Field
您还可以查看文档以获取有关
Field
的更多信息
You can use:您可以使用:
console.log('form values:'+ JSON.stringify(formik.values));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.