如何預先填寫表單已經呈現後的「還原窗體的」輸入字段

Question

我正在使用我正在處理的React應用程序的還原窗體，該還原窗體版本是V.6。我也使用了一個嚮導樣式表單（所以在完成每個字段集後，用戶可以單擊「繼續下一步」按鈕來填寫表單的下一部分）。所以我想要發生的是，當用戶填寫「運送和交付」字段集時，我希望「結算和付款」feildset（表單中的下一個feildset）自動填充「shipping」和「shipping」中輸入的值交貨「字段。它們都是相同的字段集。

不幸的是，我似乎無法使用intialValues支持，因爲當用戶將值輸入到表單中時，表單已經呈現。我還遇到了在後臺手動設置redux表單中的值的問題，因爲redux表單似乎並不是這種方法的粉絲。我可以手動設置這個值，但是我不能再用輸入字段更新它

事後看來，我希望我的表單更像在redux表單網頁上的示例嚮導表單，其中每個「feildset」實際上都是它的形式自己的形式，但現在我不能回頭去做這些改變，所以這一切都需要保持一個大的形式。

如果有人有任何建議或意見，請讓我知道！

形式簡單化了這個樣子的：

<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類，所以我可以與各國和一切的混亂，如果我需要。

的字段集的組分（所以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

可以使用the enableReinitialize prop of reduxForm重新初始化的形式的任何時間initialValues的變化，從而使你填充下游字段與來自上游的數值。

我將use formValueSelector to extract the values從redux商店並將它們設置爲initialValues。使用keepDirtyOnReinitialize prop來確保重新初始化不會覆蓋未保存的送貨地址更改。例如：

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 {} 

希望這有助於！