为 material-ui 样式集成 formik-material-ui 时，在 onSubmit 之前发生验证

Question

我想将 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;  

Answer 1

默认情况下，Formik 会在输入失去焦点时进行验证（即在onBlur() 被输入触发之后）。这就是你在说的吗？如果您愿意，可以使用 validateOnBlur 设置 (see the Formik documentation) 更改此行为。

查看您的示例，将validateOnBlur 设置为false here。