为 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 的示例。

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

validation occuring before onSubmit when integrating formik-material-ui for material-ui styling

reactjs

material-ui

formik