[英]formik-material-ui not working for TogglleButtonGroup Component
[英]validation occuring before onSubmit when integrating formik-material-ui for material-ui styling
我想将material-ui添加到我的formik应用程序中。 我正在使用formik-material-ui库( https://github.com/stackworx/formik-material-ui )执行此操作。 但是,当我将material-ui文本字段组件插入字段时,验证会在提交之前触发。 我的直觉是这是一个mapStateToProps问题,但是由于其中没有太多的文档,我不确定如何将其集成到我的代码中。
非常感谢任何帮助,谢谢!
import React from 'react';
import * as Yup from 'yup';
import { Formik, Field, Form} from 'formik';
import { TextField } from 'formik-material-ui';
class Post0 extends React.Component {
render() {
return (
<div>
<Formik
initialValues={{
'email': this.props.initValues.email,
'animal': this.props.initValues.animal,
}}
validationSchema={Yup.object().shape({
email: Yup.string()
.email('Invalid email address')
.required('Please enter an email address'),
animal: Yup.string().required('Required'),
})}
onSubmit={(values) => {
this.props.nextStep(values);
}}
render={({ values, isSubmitting}) => (
<Form>
<Field
name="email"
type="email"
value={values.email}
component={TextField}
variant="outlined"
/>
<Field
name="animal"
value={values.animal}
component={TextField}
variant="outlined"
/>
<button type="submit">Submit</button>
</Form>
)}
/>
</div>
);
}
}
export default Post0;
默认情况下,Formik会在输入失去焦点时(即在输入触发onBlur()
之后)进行验证。 这是你在说什么吗? 如果需要,可以使用validateOnBlur
设置更改此行为( 请参见Formik文档 )。
请参见此处将 validateOnBlur
设置为false
示例。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.