提交或點擊時的 Redux 表單驗證直到用戶輸入后才進行驗證

Question

我想我可能有一些配置錯誤或者可能是誤解。

我有一個包含兩個字段的表單，我想對其進行驗證。 驗證只是確保已在該字段中輸入了某些內容。

我可以在表單pristine時禁用提交按鈕，但我真的不喜歡這樣做。 我寧願讓用戶點擊提交，然后看看他們在表單中缺少什么，或者如果可以的話，提交表單。

但是，該表單似乎僅在我輸入某些內容時才進行驗證。 我可以單擊兩個字段，單擊退出，導致模糊甚至提交表單，它不會向我拋出任何驗證。 它僅在我輸入內容然后擦除時才進行驗證，它會說它無效。

我的組件...

import React, {Component} from 'react';
import {Field} from "redux-form";
import {renderField, renderTextArea} from './controls';

class AddCommentModal extends Component {

    constructor(props) {
        super(props);
        this.state = {
            modalOpen: false
        };
        this.toggleModal = this.toggleModal.bind(this);
    }

    toggleModal() {
        this.setState({
            modalOpen: !this.state.modalOpen
        });
        this.props.reset();
    }


    render() {
        const {
            modalOpen
        } = this.state;
        const {
            submitting, handleSubmit, addMessage
        } = this.props;
        return (
            <div>
                <button onClick={this.toggleModal}>Open Modal</button>
                <div className={`modal ${modalOpen ? 'is-active' : ''}`}>
                    <div className="modal-background">{}</div>
                    <div className="modal-card">
                        <form onSubmit={handleSubmit(addMessage.bind(this))}>
                            <header className="modal-card-head">
                                <p className="modal-card-title">Modal title</p>
                                <button className="delete" aria-label="close" type="button" onClick={this.toggleModal}>close</button>
                            </header>
                            <section className="modal-card-body">

                                <Field name="name" type="text"
                                       component={renderField} label="Name"
                                />
                                <Field name="message" rows={6}
                                       component={renderTextArea} label="Message"
                                />
                                <div>
                                </div>
                            </section>
                            <footer className="modal-card-foot">
                                <button className="button is-success" type="submit" disabled={submitting}>Save changes</button>
                                <button className="button" type="button"  onClick={this.toggleModal}>Cancel</button>
                            </footer>
                        </form>
                    </div>
                </div>
            </div>
        );
    }
}

export default AddCommentModal;

我的組件容器

import { connect } from "react-redux";
import AddCommentModal from '../components/AddCommentModal';
import {reduxForm} from "redux-form";
import {addComment} from '../actions/commentActions';
const mapStateToProps = (state, ownProps) => {
    return {
    };
};

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        addMessage: dispatchAddMessage.bind(this)
    };
};
const validate = values => {
    let errors = {};
    if(!values.name || values.name.trim() === '') errors.name = 'Please Provide Your Name';
    if(!values.message || values.message.trim() === '') errors.message = 'Please Provide A Message';
    return errors;
};

const dispatchAddMessage = (values, dispatch, ctx) => {
    return dispatch(addComment(values.name, values.message));
};

const AddCommentModalForm = reduxForm({
    form: 'AddCommentModalForm',
    validate,
})(AddCommentModal);

export default connect(mapStateToProps, mapDispatchToProps)(AddCommentModalForm);

我最初進行了字段級驗證，因為驗證非常簡單，但這不起作用，所以嘗試了同步驗證，但仍然不起作用。 有任何想法嗎？

Answer 1

我不確定您是否仍在尋找此問題的答案，但似乎存在與驗證和使用reset()方法相關的問題。 請在此處參考 GitHub 上的未解決問題：

https://github.com/redux-form/redux-form/issues/2971

線程中包含一些解決方法和更多詳細信息。 由於您在代碼中使用了reset方法，因此它可能適用於您的問題。