Reactjs 如何预填充一个；redux表单'；s"；表单已呈现后的输入字段

我正在为我正在开发的React应用程序使用redux表单，redux表单版本为V.6。我还使用向导样式的表单（因此在完成每个字段集后，用户可以单击“继续下一步”按钮来填写表单的下一部分）。因此，我希望在用户填写“shipping and delivery”字段集时，我希望“billing and payment”字段集（表单中的下一个字段集）自动填充“shipping and delivery”字段集中输入的值。它们都是相同的字段集

不幸的是，我似乎无法使用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>

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>
);

它也在es6课程中，所以如果需要的话，我可以搞乱州和一切

字段集组件（发货、交货、计费和付款）使用and组件，如下所示：

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

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>
);

类shippingAndDelivery扩展了React.Component{
渲染（）{
常数{
到底需要什么
}=这是道具；
返回(
)
}
}
const RenderedFields=（fields）=>(
送货地址

);

您可以随时使用重新初始化表单

初始值

更改，从而使用来自上游的值填充下游字段

我将从redux存储中删除并将它们设置为

initialValues

。使用

keepDirtyOnReinitialize

prop确保重新初始化不会覆盖对发货地址的未保存更改。例如：

const selector=formValueSelector（'MyFormName'））
常量mapStateToProps=减速机=>{
//从redux存储获取配送地址值
常数{
地址:，
地址可选，
城市
zipCode，
国家
}=选择器（减速器“装运”）
返回{
初始值：{
//发货地址最初为空
装运：{
地址：''，
地址可选：“”，
城市：''，
zipCode:“”，
国家：''
},
//账单地址初始值可随时更改
//发货地址值已更改
账单：{
地址:，
地址可选，
城市
zipCode，
国家
}
}
}
}
@连接（MapStateTops）
@红肿({
表单：“MyFormName”，
//每次InitialValue更改时重新初始化表单
enableReinitialize:true，
//确保脏字段（用户已编辑的字段）
//不会被重新初始化覆盖
keepDirtyOnReinitialize:true
})
类MyFormContainer扩展MyFormComponent{}

---

希望这有帮助

尝试将redux表单this.props.change与您要初始化的值一起使用，即this.props.change（'valueFromBillingAndPayment'，valueToShow'）。该值将在第2步显示。或使用enableReinitialize选项设置表单，请参阅以了解更多详细信息。是<代码>启用重新初始化是此处的关键。