Проверка формы Redux внутри модального окна - PullRequest
Новая
       10

Проверка формы Redux внутри модального окна

0 голосов
/ 05 мая 2020

Я использую форму Redux, и я также использую проверку, исходящую от формы Redux, на данный момент это базовая c проверка для проверки, является ли ввод пустым.

Моя форма redux находится внутри модального окна ANTD, поэтому, когда я сначала открываю модальный, не заполняйте ввод и не нажимайте кнопку отправки, все работает, я получаю сообщение об ошибке, но когда я закрываю модально и откройте новое время (без refre sh страницы), не заполняйте форму и не нажимайте кнопку отправки, ничего не происходит Я также проверяю мета из свойств поля, и ничего не отображается, и ошибка отображения объекта значения = false

Но когда я обновляю sh страницу, вся работа сделана ...

Проблема в том, что форма не запускает функцию проверки каждый раз, когда я открываю или закрываю модальное окно ...

Вот мой код 

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);

Capture

...