redux-form 연결된 필드가있는 마법사 양식

Question

React를 사용하여 여러 단계로 구성된 신청서를 작성합니다. 처음에는 순수한 내부 상태로 만들었지 만 이제는 redux 형식을 사용하여 Redux로 리팩토링하는 과정에 있습니다.

여기에서 예제를 기초로 사용하면 : http://redux-form.com/5.2.5/#/examples/wizard?_k=oftw7a 좋은 방법이 있습니다.

하지만 같은 값을 가질 두 가지 양식이있을 때 문제가 나타납니다. 페이지 중 하나에서 이름 필드가 있는데, 다음 페이지의 이름 필드에 중복되어 있어야합니다. 마지막 페이지에서 되돌아 가면 반대가 발생합니다. 이것이 어떻게 달성 될 수 있는지에 대한 조언?

Answer 1

마법사를 사용하면 기본적으로 똑같은 양식이 여러 조각으로 나뉩니다. redux-form은 그것들을 이름으로 추적하기 때문에 궁극적으로는 같은 형식입니다. 라이브러리가 이름을 사용하여 동일한 양식의 부분을 식별하는 방법입니다.

form: 'wizard', 

여기서 정확히 같은 양식의 인스턴스가 조각 전체에서 공유된다는 것을 알 수 있습니다. fields도 비슷한 방식으로 작동합니다. 각 field은 form의 일부로 정의됩니다.

만큼 당신이 당신이 reduxForm 함수에 전달하고 그들이 동일한 기본 양식 객체를 사용하도록 한 양식에 대한 value는, 동일로, 그것을 위해 일해야 fields 객체의 내부 같은 field 상수를 사용할 때 너 괜찮아.

한 페이지에서 다른 페이지에서 다음

export default reduxForm({ 
    form: 'wizard', 
    fields : { 
    'fieldIWantOnBothPartsOfTheForm', 
    'someOtherFieldThatShouldOnlyBeHere', 
    }, 
    ... 

에 합격해야합니다

export default reduxForm({ 
    form: 'wizard', 
    fields : { 
    'fieldIWantOnBothPartsOfTheForm', 
    'thirdFieldHere', 
    }, 
    ... 

을 또한 탐색하려는 경우 false에 동일한 destroyOnUnmount를 유지해야합니다 백업 및 -앞으로.

희망이 있습니다.