我想将material-ui添加到我的formik应用程序中。我使用formik-material-ui库(https://github.com/stackworx/formik-material-ui)来做这件事。但是,当我将material-ui textfield组件插入到字段中时,在提交之前会触发验证。我的直觉是这是一个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;
发布于 2019-05-03 22:29:58
默认情况下,在Formik中,验证发生在输入失去焦点时(即输入触发onBlur()
之后)。这就是你所说的吗?如果需要,您可以使用validateOnBlur
设置(see the Formik documentation)更改此行为。
请参见将validateOnBlur
设置为false
here的示例。
https://stackoverflow.com/questions/55962611
复制相似问题