2017-10-20 5 views
0

목록이 있으며 항목을 개별적으로 제출하는 양식을 작성하려고합니다. 각 행은 동적으로 추가됩니다. 나는이 같은 동적 형태의 각각의 이름을 만들 compose()를 사용Redux 양식, 동적 이름 양식이 등록 된 등록 된 필드와 관련 됨

return { 
    formName: ownProps.form 
} 

을 그리고 내 아이 컴퍼넌트에 다음과 같이 (목록의 항목을) 양식 이름을 전달, 목록은 감속기 도착 :

list.map((item, index) => (
    <RowAuthorizations form={`${formName}[${index}]`} onSubmit={this.submitRowAuthorization} /> 
)) 

나는 감속기에서 선택된 값없이 내 목록 필드를 새로 고침 할 때 : 필드

tenant.users.filter((x) => x.id !== action.payload.id) 

값이 삭제되었지만 REGIST 내 구성 요소가 삭제 된 값없이 목록을 다시 렌더링하면 eredFields가으로 다시 나타납니다.

Add the Field :

내가 필드 제거 : I 필드 추가 할 때

당신은 추가해야합니다

: 마지막으로

Remove the field

+0

감속기의 필드를 제거 하시겠습니까? 감속기는 아무것도 변이시키지 않아야합니다! –

+0

선택한 항목을 제거하는 축소 기 전용 필터 목록으로, 내 구성 요소가 업데이트 된 목록을 다시 렌더링합니다. – user3703539

답변

0

을, 나는 내 문제를 해결 중첩 된 객체 및 추가 destroyOnUnmount : true (기본값은 t rue를 false로 변경하면 rue). registeredField는 이미 마운트 된 각 필드를 재정 의하여 필드가 등록되지 않은 이유입니다.

목록을 만들고 각 행을 독립적으로 제출하려면 (각 행이 양식입니다) mapStateToProps (컨테이너에서 전달 된 동적 이름)를 사용하여 동적 이름을 양식에 추가하고 다음과 같은 중간 구성 요소로 복구해야합니다. 이 : ...

{ list.map((item, index) => { 
     return <RowAuthorizations form={`${formName}[${index}].${name}`} onSubmit={this.submitRowAuthorization} /> 
    }) 
} 

이름 registeredField, 값을 포함하는 하위 개체입니다 그래서 당신은이 :

return { 
    formName: ownProps.form 
} 

이는 FormName

통과 할 필요는 각각의 아이 (양식 행)에 소품을 가지고 user [0] .user.value 당신이 formReducer.plugin을 ({})를 사용하고이 단계를 수행이 경우에 대한 감속기에서 양식을 관리하려면 그 사용자 [0] 달리의

을 .values.

내가 맞으면 알려주세요.