首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >集成formik-material-ui for material-ui样式时,在onSubmit之前进行验证

集成formik-material-ui for material-ui样式时,在onSubmit之前进行验证
EN

Stack Overflow用户
提问于 2019-05-03 10:36:13
回答 1查看 340关注 0票数 0

我想将material-ui添加到我的formik应用程序中。我使用formik-material-ui库(https://github.com/stackworx/formik-material-ui)来做这件事。但是,当我将material-ui textfield组件插入到字段中时,在提交之前会触发验证。我的直觉是这是一个mapStateToProps问题,但我不确定如何将它集成到我的代码中,因为关于它的文档并不多。

任何帮助都非常感谢,谢谢!

代码语言:javascript
运行
复制
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;  
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-05-03 22:29:58

默认情况下,在Formik中,验证发生在输入失去焦点时(即输入触发onBlur()之后)。这就是你所说的吗?如果需要,您可以使用validateOnBlur设置(see the Formik documentation)更改此行为。

请参见将validateOnBlur设置为false here的示例。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55962611

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档