React Bootstrap + Formik - 单击提交按钮后显示错误答案

【问题标题】：React Bootstrap + Formik - show errors after I click submit buttonReact Bootstrap + Formik - 单击提交按钮后显示错误
【发布时间】：2019-08-20 20:31:36
【问题描述】：

在我的应用程序中，我使用 React Bootstrap 和 Formik。我希望引导程序在我按下提交按钮后显示该字段无效（例如不是电子邮件但应该是）。然后当我开始在字段中输入新值时，它应该会消失。在我使用的教程中，我只找到了仅在用户输入值的同时显示该字段无效的方法？

如何做到这一点？如何设置isInvalid使用Formik提交后才显示错误？

这是我当前的代码

import * as yup from "yup";
import React from "react";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";
import {Formik} from "formik";
import {loginActions} from "../_actions/loginActions";
import {connect} from "react-redux";
import {loginService} from "../_services";

const schema = yup.object().shape({
    username: yup.string().email("Login musi być w formie e-mail").required("Wypełnij pole login"),
    password: yup.string().required("Wypełnij pole hasło")
});

class LoginForm extends React.Component {

    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(e) {
        const {username, password} = e;
        if (username && password) {
            loginService
                .login(username, password)
                .then(
                    success => {
                        const data = success.data;
                        if (success.status === 200 && data.success === true) {
                            return {...data.user, password: password};
                        } else if (success.status === 400) {
                            window.location.reload();
                        }
                        const error = (!data.success && "Wrong credentials") || success.statusText;
                        return Promise.reject(error);
                    }
                )
                .then(auth => {
                    this.props.login(auth)
                })
        }
    }

    render() {
        return (
            <Formik
                validationSchema={schema}
                onSubmit={e => this.handleSubmit(e)}
                initialValues={{username: '', password: ''}}>
                {
                    formProps => (
                        <Form name='form' onSubmit={formProps.handleSubmit}>
                            <Form.Group noValidate controlId="loginForm.username">
                                <Form.Label>Adres e-mail</Form.Label>
                                <Form.Control
                                    type="text"
                                    name="username"
                                    value={formProps.values.username}
                                    onChange={formProps.handleChange}
                                    isInvalid={!!formProps.errors.username}
                                />
                                <Form.Control.Feedback type="invalid">
                                    {formProps.errors.username}
                                </Form.Control.Feedback>
                            </Form.Group>
                            <Form.Group controlId="loginForm.password">
                                <Form.Label>Hasło</Form.Label>
                                <Form.Control
                                    type="password"
                                    name="password"
                                    value={formProps.values.password}
                                    onChange={formProps.handleChange}
                                >
                                </Form.Control>
                                <Form.Control.Feedback type="invalid">
                                    {formProps.errors.password}
                                </Form.Control.Feedback>
                            </Form.Group>
                            <Form.Group controlId="loginForm.loginBtn">
                                <Button variant="primary" type="submit">
                                    Zaloguj się
                                </Button>
                                {formProps.isSubmitting &&
                                (
                                    <img
                                        src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="
                                    />)
                                }
                            </Form.Group>
                        </Form>
                    )
                }
            </Formik>
        )
    }
}


function mapState(state) {
    const {session} = state;
    return {session}
}

const connectedLoginForm = connect(mapState, {login: loginActions.login})(LoginForm);
export {connectedLoginForm as LoginForm};

【问题讨论】：

您应该查看When does validation run (jaredpalmer.com/formik/docs/guides/…) 和dirty (jaredpalmer.com/formik/docs/api/formik#dirty-boolean) 道具上的formik 文档。

标签： reactjs react-bootstrap formik

【解决方案1】：

Formik 验证运行，onChange、onBlur 和 onSubmit 分别。因此，在您的情况下，如果您希望仅在提交时对其进行验证，则应将 validateOnChange,validateOnBlur 道具传递为 false。

<Formik
   initialValues={{ email: '', password: '' }}
   validationSchema={LoginSchema}
   validateOnChange={false}
   validateOnBlur={false}
   onSubmit={values => onLogin(values)}>
     ...
 />

【讨论】：