reactjs - redux-form:如果至少一个字段无效，如何禁用提交按钮？

Question

我正在使用 redux-form 渲染下面的简单表单，并且运行良好。现在，我想在另一种情况下禁用提交按钮:如果 Field 中的任何一个有错误(即设置了 meta.error)。

从查看文档来看，我认为周围的 <form> 是不可能的知道是否是 <Field>组件有错误。也许有人有一个想法，如何像使用 disabled={hasErrors || submitting || pristine} 一样简单地解决它

const EditBlogEntryForm = ({ onSubmit, reset, handleSubmit,
                         pristine, submitting, ...rest }) => {
    console.log('rest: ', rest);
    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <div className="form-group">
                <Field name="title"
                    type="text"
                    component={renderField}
                    label="Titel"
                    className="form-control"
                    placeholder="Titel eingeben..." />
            </div>
            <div className="form-group">
                <Field name="text"
                    component={renderTextArea}
                    label="Text"
                    className="form-control"
                    placeholder="Textinhalt eingeben..." />
            </div>  
            <div className="form-group">
                <Field name="image"
                    type="text"
                    component={renderField}
                    label="Bild-URL:"
                    className="form-control"
                    placeholder="Bildadresse eingeben..." />
            </div>  
            <div>
                <button type="submit" className="btn btn-default"
                    disabled={submitting || pristine}>
                    Blogeintrag speichern
                </button>
                <button type="button" className="btn btn-default"
                    disabled={pristine || submitting}
                    onClick={reset}>
                    Formular leeren
                </button>
            </div>
        </form>
    );
};

Answer 1

不要滥用你只需要使用 this.props 的状态对于每个 setState 组件，将再渲染一次

const {invalid} = this.props

return(
<button type="submit" className="btn btn-default"
     disabled={invalid|| submitting || pristine}>
     Blogeintrag speichern
 </button>)

更多文档: https://redux-form.com/6.0.0-alpha.4/docs/api/props.md/