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。

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

1 个答案: