Redux-Form 7 验证 - 功能组件答案

【问题标题】：Redux-Form 7 Validation - Functional ComponentRedux-Form 7 验证 - 功能组件
【发布时间】：2018-10-12 22:26:49
【问题描述】：

所以我试图将 redux-form 分离为 stateless-component 和 container-component，但是当我尝试进行 syncValidation 时，由于某种原因没有调用验证。我错过了什么？

renderField 中的错误和警告返回未定义。

我打算将 renderField 函数从无状态组件中移出

容器 -

let EditMovie = (props) => {
const { updateMovie, editModal, editModalStateChange, invalid, initialValues, handleSubmit, pristine } = props;

return (   
    <MovieModal 
        modalTitle={initialValues.Title}
        initialValues= {initialValues} 
        invalid= {invalid} 
        validators= {Validators} 
        exit= {editModalStateChange} 
        isOpen= {editModal} 
        handleSubmit= {handleSubmit}
        onSubmit= {updateMovie}
        pristine={pristine}
    />
);
};

const validate = values => {
    const errors = {}
    if (!values.Title) {
        errors.username = 'Required'
    } 
    return errors
}

  const warn = values => {
    const warnings = {
        Title: 'bla bla'
    }

    return warnings
  }



const mapStateToProps = (state) => ({
    initialValues: state.movies.selectedMovie,
    editModal: state.movies.editModal,
});


EditMovie = reduxForm({ form: 'editMovie', validate, warn })(EditMovie);

export default connect(mapStateToProps, { editModalStateChange, updateMovie } )(EditMovie);

无状态 -

const renderField = ({ input, label, type, meta: { touched, error, warning } }) => (
<div>
  <label>{label}</label>
  <div>
    <input {...input} placeholder={label} type={type} />
    {touched &&
      ((error && <span>{error}</span>) ||
        (warning && <span>{warning}</span>))}
  </div>
</div>
  )

const MovieModal = (props) => {

    const { pristine, handleSubmit, onSubmit, isOpen, exit, validators, invalid, modalTitle } = props;

    return (
        <Modal visible={isOpen} onClickBackdrop={() => exit()}>
            <div className="modal-body">
                <form onSubmit={handleSubmit(onSubmit)}>
                    <div className="form-group">
                        <Field component={renderField} name="Title" label="Movie Title" />
                    </div>

                    <div className="modal-footer">
                        <button type="button" className="btn btn-secondary" onClick={() => exit()}>close</button>
                        <button type="submit" className="btn btn-primary" disabled={invalid || pristine}>Save</button>
                    </div>
                </form>
            </div>
        </Modal>
    );
}

【问题讨论】：

标签： reactjs validation redux-form

【解决方案1】：

您需要在字段组件中提供validate函数

【讨论】：

这不是用于字段级验证吗？
这可以通过两种方式完成，同步验证提供配置参数和字段级别验证。您现在所做的方式是正确的，但 HOC 的顺序是错误的。 connect 应该在里面，reduxForm 应该在外面。 syncValidation redux-form.com/7.4.2/examples/syncvalidation Redux 表单和 react-redux 连接函数 redux-form.com/7.2.2/docs/faq/howtoconnect.md
所以对于 syncValidation 来说它只是 HOC 订单替换？我不应该在字段组件中传递验证函数吗？
正确。您需要更改的是export default reduxForm({...})(connect(....)(Component))
还是什么都没有，当调用 renderfield 函数时出现 error = undefined

【解决方案2】：

我发现问题了！

问题在于名为 - react-bootstrap4-modal 的引导模式模块

当我将 MovieModal 包装在 Modal 类中而不是其中时，一切正常

感谢您的帮助

【讨论】：