양식이 이미 렌더링 된 후 "redux 양식의"입력 필드를 채우는 방법

Question

나는 작업중인 React 앱에 대해 redux 양식을 사용하고 있으며, redux 양식 버전은 V.6입니다. 또한 마법사 스타일 양식을 사용하고 있습니다 (각 필드 집합이 완료된 후 사용자는 "다음 단계로 진행"단추를 클릭하여 양식의 다음 섹션을 작성할 수 있습니다). 그래서 내가 원하는 것은 사용자가 "운송 및 배달"필드 세트를 채우면 "청구 및 지불"필드 (양식의 다음 필드)가 "운송 및 배달"필드에 입력 된 값으로 자동 채우기를 원합니다. 배달 "fieldset. 둘 다 동일한 필드 세트입니다.

불행히도 사용자가 양식에 값을 입력 할 때 양식이 이미 렌더링되므로 intialValues ​​prop를 사용할 수없는 것처럼 보입니다. 또한 redux 폼이이 메소드의 팬인 것처럼 보이지 않으므로 백엔드에서 수동으로 redux 폼의 값을 설정하는 문제가 발생합니다. 값을 수동으로 설정할 수는 있지만 더 이상 입력 필드로 업데이트 할 수 없습니다.

보기에 나는 각각의 "feildset"이 실제로있는 redux 양식 웹 페이지에서 예제 마법사 양식과 같은 양식을 만들었 으면합니다. 자신의 양식을 만들었지 만, 지금 당장은 되돌아 가서 그 변화를 만들 수 없으므로 모두가 하나의 커다란 형태로 머무를 필요가 있습니다.

아무도 어떤 조언이나 의견이 있으면 알려 주시기 바랍니다.

<form> 
    <ShippingAndDelivery 
     checkFieldsetProgress={this.checkFieldsetProgress} 
     handleUpdatingDeliveryType={handleUpdatingDeliveryType} 
     availableShippingTypes={availableShippingTypes} 
     shippingType={shippingType} 
     handleShippingRequest={handleShippingRequest} 
     recieveShippingError={recieveShippingError} 
     shippingError={shippingError} 
    /> 
    <BillingAndPayment 
     checkFieldsetProgress={this.checkFieldsetProgress}  
     handlePopulateBillingAddress={handlePopulateBillingAddress} 
     promoCodeValue={promoCode} 
    /> 
</form> 

그것은이 ES6 클래스도 그렇게 내가 주와 모든 것을 엉망 내가 필요 할 수있는 경우 :

양식

이 같은 모습을 무식하게.

fieldset에서는 구성 요소 (그래서 ShippingAndDelivery 및 BillingAndPayment)

이 같은 및 구성 요소를 사용 :

class shippingAndDelivery extends React.Component { 
    render() { 
     const { 
      whatEverPropsNeeded 
     } = this.props; 
     return (
      <div> 
       <Fields 
        names={[ 
         'address_shipping', 
         'email_shipping' 
        ]} 
        component={RenderedFields} 
        whatEverPropsNeeded={whatEverPropsNeeded} 
       /> 
      </div> 
     ) 
    } 
} 

const RenderedFields = (fields) => (
<div className={style.container} onChange={fields.updateProgress(fields)}> 
    <Col md={8}> 
     <fieldset> 
      <div className={style.title}> 
       <p>Shipping Address</p> 
      </div> 
      <Col md={12}> 
       <BasicInput 
        input={fields.email_shipping.input} 
        meta={fields.email_shipping.meta} 
        disabled={false} 
        placeholder="Email Address" 
       /> 
      </Col> 
      <Col md={12}> 
       <BasicInput 
        input={fields.address_shipping.input} 
        meta={fields.address_shipping.meta} 
        disabled={false} 
        placeholder="Address Line 1" 
       /> 
      </Col> 
      </div> 
     </fieldset> 
</div> 
); 

Answer 1

당신은 어떤 시간을 형태를 initialValues 변경을 다시 초기화 the enableReinitialize prop of reduxForm을 사용할 수 있습니다, 따라서 가능하면 다운 스트림 필드를 채 웁니다 값은 상류에서 온다.

나는 redux 상점의 use formValueSelector to extract the values을 입력하고 initialValues으로 설정합니다. keepDirtyOnReinitialize 소품을 사용하여 재 초기화가 저장되지 않은 변경 사항을 배송 주소로 덮어 쓰지 않도록하십시오. 예 :

const selector = formValueSelector('MyFormName') 

const mapStateToProps = reducers => { 
    // obtain shipping address values from the redux store 
    const { 
    address, 
    addressOptional, 
    city, 
    zipCode, 
    country 
    } = selector(reducers, 'shipping') 

    return { 
    initialValues: { 
     // shipping address is empty initially 
     shipping: { 
     address: '', 
     addressOptional: '', 
     city: '', 
     zipCode: '', 
     country: '' 
     }, 
     // billing address initial values are changed any time 
     // the shipping address values are changed 
     billing: { 
     address, 
     addressOptional, 
     city, 
     zipCode, 
     country 
     } 
    } 
    } 
} 

@connect(mapStateToProps) 
@reduxForm({ 
    form: 'MyFormName', 
    // reinitialize the form every time initialValues change 
    enableReinitialize: true, 
    // make sure dirty fields (those the user has already edited) 
    // are not overwritten by reinitialization 
    keepDirtyOnReinitialize: true 
}) 
class MyFormContainer extends MyFormComponent {} 

희망이 있습니다.