模式内部的Redux表单验证

Question

我正在使用Redux表单，也正在使用来自Redux Form的验证，目前，这是检查输入是否为空的基本验证。

我的redux表单位于ANTD模态中，所以当我首先打开模态时，不要填写输入并单击Submit按钮，所有的都可以，但是我收到错误消息，但是当我关闭模态并打开时新的时间（不刷新页面），不填写表单并单击“提交”，没有任何反应。我也在检查Field道具中的元数据，没有任何显示，值对象显示为error = false

但是当我刷新页面时，它的所有工作都完成了...

问题是每次我打开或关闭模态时，表单都没有运行验证函数...

这是我的代码

import React from "react";
import {reduxForm, Field} from "redux-form";
import SurveyField from "./SurveyField";
import styles from './styles/SurveyForm.module.css'

class SurveyForm extends React.Component {
    state = {value:"", errors: null}

    handleChange = e => {
        this.setState({ value: e.target.value }, () => {
            this.props.change("inputTextBox", this.state.value);
        });
    };

    onCancel(){
        this.setState({ value: "" }, () => this.props.reset());
        this.props.onCancel();
    }

    render() {
        return (
            <div>
                <form onSubmit={this.props.handleSubmit(values => console.log(values))}>
                    <div className={styles.form}>
                        <Field
                           key='title'
                           placeholder='Title'
                           name='title'
                           component={SurveyField}
                           type="text"
                           handleChange={this.handleChange}
                           controlledValue={this.state.value}
                       />
                       <Field
                        key='Subject'
                        placeholder='Subject'
                        name='subject'
                        component={SurveyField}
                        type="text"
                        handleChange={this.handleChange}
                        controlledValue={this.state.value}
                    />
                    <Field
                        key='body'
                        placeholder='Email Body'
                        name='body'
                        component={SurveyField}
                        type="text"
                        handleChange={this.handleChange}
                        controlledValue={this.state.value}
                    />
                    <Field
                        key='recipients'
                        placeholder='Recipient List'
                        name='recipients'
                        component={SurveyField}
                        type="text"
                        handleChange={this.handleChange}
                        controlledValue={this.state.value}
                    />
                </div>
                <button type="submit">Submit</button>
                <button onClick={this.onCancel.bind(this)}> Cancel</button>
            </form>
        </div>
    );
  }
}

function validate(values) { // values coming from the redux from
  const errors = {};

  if(!values.title){
    errors.title= 'You must provide a title';
 }

return errors;
}

export default reduxForm({
  validate: validate, // ES6 validate
  form: 'surveyForm'
})(SurveyForm);