Question

这里是代码

import React from 'react';
import PropTypes from 'prop-types';
import { Link, Redirect } from 'react-router-dom';
import { Field, reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import { Section, RenderField, Block } from 'components';
import { validateRegisterForm as validate } from 'utils/validations';
import { forgotPassword } from 'redux/modules/auth';

const mapStateToProps = state => {
    const { sending, sendSuccess } = state.auth;

    return { sending, sendSuccess };
};

const reduxFormDecorator = reduxForm({
    form: 'ForgotPasswordForm',
    validate,
});

const reduxConnector = connect(mapStateToProps, { forgotPassword });

class ForgotPassword extends React.Component {
    static propTypes = {
        sending: PropTypes.bool,
        forgotPassword: PropTypes.func.isRequired,
        handleSubmit: PropTypes.func.isRequired,
    };

    static defaultProps = {
        sending: false,
        sendSuccess: false,
    };

    componentWillReceiveProps(nextProps) {
        if (nextProps.sendSuccess) {
            this.props.reset();
        }
    }

    handleFormSubmit = data => {
        this.props.forgotPassword(data);
    };

    render() {
        const { handleSubmit, reset, sending } = this.props;

        return (
            <div>
                <Section>
                    <div className="form-popup">
                        <div className="form-popup-content">

                            <Block loading={sending}>
                                <form
                                    id="register-form"
                                    name="register-form"
                                    method="POST"
                                    onSubmit={handleSubmit(this.handleFormSubmit)}
                                >

                                    <Field
                                        name="email"
                                        type="email"
                                        component={RenderField}
                                        label="Alamat Email"
                                        description="contoh: email@example.com"
                                    />

                                    <button type="submit" className="button mid primary m-bottom-25">
                                        Reset
                                    </button>
                                </form>

                            </Block>
                        </div>
                    </div>
                </Section>
            </div>
        );
    }
}

export default reduxConnector(reduxFormDecorator(ForgotPassword));

首先验证效果很好。但是当提交表单并调用this.props.reset()（输入变为空）并且我尝试再次提交它时，它不验证输入（输入为空）。

任何解决方案？

validation.js

export function validateRegisterForm(values) {
    const errors = {};
    let hasErrors = false;

    if (!values.first_name || values.first_name.trim() === '') {
        errors.first_name = 'Required';
        hasErrors = true;
    }

    if (!values.email || values.email.trim() === '') {
        errors.email = 'required';
        hasErrors = true;
    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
        errors.email = 'required';
        hasErrors = true;
    }

    if (!values.password || values.password.trim() === '' || values.password.length < 6) {
        errors.password = 'required';
        hasErrors = true;
    }

    return hasErrors && errors;
}

Answer 1

使用this.props.initialize()而不是this.props.reset()。

Answer 2

这似乎是一个已知问题（请检查Validation not working after reset #2971）

讨论中有一些可能的解决方法，例如this one：

this.props.destroy();
this.props.initialize();

或this

shouldError: ({ props }) => {
  return props.invalid;
}

React - Redux Form在表单重置后不验证

2 个答案: