Redux-form : 제출하기 전에 마법사 양식의 모든 값을 가져오고 표시하십시오.

Question

초급자이므로 양식을 제출하기 전에 마법사 양식에서 모든 값을 액세스하고 표시하는 데 문제가 있습니다. 나는 사용자가 제출하기 전에 모든 값을 확인할 수있는 "미리보기 구성 요소"를 만들려고합니다. 이것은 내 WIzardFormPreview 구성 요소

import React from 'react'; 
import {Field, reduxForm} from 'redux-form'; 
import { Values } from 'redux-form-website-template'; 
import {connect} from "react-redux"; 
import validate from '../middleware/validate'; 

let WizardFormPreview = props => { 

const {handleSubmit, pristine, previousPage, submitting} = props; 

return (
    <form onSubmit={handleSubmit} className="form-horizontal"> 
     <div className="step-3"> 

      <div>{familyFlag}</div> 
      <div> 
       <button type="button" className="previous" onClick={previousPage}> 
        Previous 
       </button> 
       <button type="submit" disabled={pristine || submitting}>Submit</button> 
      </div> 
     </div> 
    </form> 
); 
}; 
export default reduxForm({ 
form: 'wizard', 
destroyOnUnmount: false, 
forceUnregisterOnUnmount: true, 
validate, 
})(WizardFormPreview); 

WizardFormPreview = connect(
state => ({ 
    values: { 
     family : state.form.wizard.values.familyFlag 
    } 
}) 
)(WizardFormPreview) 

나는 (내가 이해, 있어야되지 않는) "familyFlag은 정의되지 않은"하지만 난 그 사용할 수 있도록하는 방법을 알아낼 수 없습니다 얻고있다. 참고로 입력 familyFlag이 양식의 첫 번째 단계에 있습니다.

마법사 폼에서 모든 값을 얻고 표시하려면 어떻게합니까? 도와 주시면 감사하겠습니다. 당신은 WizardFormPreview 구성 요소

에 familyFlag을 정의하지 않은

Answer 1

redux-form 전체 형태 '값이 포함 된 객체를 반환하는 선택기 getFormValues을 가지고 같은 소품에서 그것을 얻을 필요가있다. 문제는 this bug report에 따르면 values은 예약 된 이름입니다. 내가 이름을 바꾸 자마자 일했다. 하지만 나중에 예약어 values도 사용했습니다. 그것이 버그이든 아니든간에 - 여전히 확실하지 않습니다. 아래에 전체 코드를 게시하고 있습니다 (그것은 values을 사용합니다), 누군가를 도울 수 있습니다.

import React from 'react'; 
import {Field, reduxForm, values, getFormValues } from 'redux-form'; 
import {connect} from "react-redux"; 
import validate from '../middleware/validate'; 

const FetchValues = connect(state => ({ 
values: getFormValues('wizard')(state), 
}))(({ values }) => 

<div> 
    <p>Check if everything is alright.</p> 
     <div className="row"> 
      <div className="col-xs-12"> 
       <h6>Your Name</h6> 
      </div> 
      <div className="col-xs-12"> 
       <p>{values.name}</p> 
      </div> 
     </div> 

    <div className="row"> 
     <div className="col-xs-12"> 
      <h6>Are you part of a family?</h6> 
     </div> 
     <div className="col-xs-12"> 
      <p>{values.familyFlag}</p> 
     </div> 
    </div> 
</div>) 


let WizardFormPreview = (props) => { 

const {handleSubmit, pristine, previousPage, submitting} = props; 

return (
    <form onSubmit={handleSubmit} className="form-horizontal"> 
     <div className="step-3"> 

      <FetchValues/> 
      <div> 
       <button type="button" className="previous" onClick={previousPage}> 
        Previous 
       </button> 
       <button type="submit" disabled={pristine || submitting}>Submit</button> 
      </div> 
     </div> 
    </form> 
); 
}; 

export default reduxForm({ 
form: 'wizard', 
destroyOnUnmount: false, 
forceUnregisterOnUnmount: true, 
validate, 
})(WizardFormPreview); 

실례를 제공 한 github의 @danielrob에게 감사드립니다.

Answer 2

당신은

let WizardFormPreview = props => { 

const {handleSubmit, pristine, previousPage, values, submitting} = props; 
const {family: familyFlag} = values; 

return (
    <form onSubmit={handleSubmit} className="form-horizontal"> 
     <div className="step-3"> 

      <div>{familyFlag}</div> 
      <div> 
       <button type="button" className="previous" onClick={previousPage}> 
        Previous 
       </button> 
       <button type="submit" disabled={pristine || submitting}>Submit</button> 
      </div> 
     </div> 
    </form> 
); 
};