Question

所以我试图将redux形式分为无状态组件和容器组件，但是当我尝试进行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>
    );
}

Answer 1

您需要在字段组件中提供validate功能

Answer 2

好了，我发现了问题！

问题在于名为-react-bootstrap4-modal的Bootstrap Modal模块

当我将MovieModal封装在Modal类中而不是在其内部时，一切工作正常

感谢您的帮助

Redux-Form 7验证-功能组件

2 个答案: