在集成formik-Material-UI以进行材料-UI样式时，在Onsubmit之前发生验证

Question

我想将材料-UI添加到我的formik应用程序中。我正在使用Formik-Material-UI库(https://github.com/stackworx/formik-material-ui(来执行此操作。但是，当我将材料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;  

Answer 1

默认情况下，与formik默认情况下，当输入失去焦点时会发生验证(即，在onBlur()被输入触发之后(。这是您在说什么吗？如果需要使用validateOnBlur设置，则可以更改此行为(请参阅formik文档(。

请参阅您的示例，其中 validateOnBlur设置为false。