>

그래서 redux-form을 stateless-component와 container-component로 분리하려고하지만 syncValidation을 시도 할 때 어떤 이유로 든 호출이 없습니다. 내가 뭘 놓치고 있니?

renderField의 오류 및 경고는 정의되지 않은 상태로 반환됩니다.

그리고 stateless 컴포넌트에서 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>
    );
}

  • 답변 # 1

    validate 를 제공해야합니다  필드 구성 요소의 함수

  • 답변 # 2

    글쎄 문제가 발견되었습니다!

    이 문제는 Bootstrap Modal 모듈 이름이-react-bootstrap4-modal입니다

    내가 아닌 모달 클래스에서 MovieModal을 감싸면 모든 것이 제대로 작동했습니다

    도움을 주셔서 감사합니다

관련 자료

  • 이전 python - 기존 플라스크 HTML 테이블에 팬더 데이터 프레임을 표시하는 방법은 무엇입니까?
  • 다음 android - 어떻게 직렬화에 GSON 및 개조를 얻을 문자열로 JSON 응답에서 배열을지도로?