フォームが既にレンダリングされた後に "reduxフォームの"入力フィールドに入力する方法

Question

私が作業しているReactアプリケーションのためにreduxフォームを使用していますが、reduxフォームバージョンはV.6です。ウィザードスタイルのフォームも使用しています（各フィールドセットが完了したら、ユーザーは「次のステップに進む」ボタンをクリックしてフォームの次のセクションを記入できます）。だから、私がしたいのは、ユーザーが "配送と配送"フィールドセットを記入したときに、 "請求と支払い"のフィールセット（フォームの次のフィールセット）が、配達 "フィールドセット。どちらも同じフィールドセットです。

残念ながら、ユーザーがフォームに値を入力したときにフォームが既にレンダリングされるため、私はintialValues propを使用できないようです。私はまた、reduxフォームがこのメソッドのファンではないように見えるので、バックエンドで手動で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 {}