如何在表单呈现后预填充"redux form's"输入字段

Question

我正在使用Redux表单作为我正在处理的React应用程序，Redux表单版本为v.6。我还使用向导样式表单（因此，在每个字段集完成后，用户可以单击"继续进行下一步"按钮以填写表单的下一部分）。因此，我想发生的事情是，当用户填写"运输和交付"现场集时，我希望"计费和付款" feildset（表格中的下一个feildset）自动填充，并在"运输和运输"中输入的值交付"现场集"。它们俩都是相同的字段集。

不幸的是，似乎我将无法使用IntialValues Prop，因为当用户将其值输入表单时，该表单将已经呈现。我还遇到了在后端手动中设置值的问题，因为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类中

fieldset组件（因此shippyanddelivery and 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

您可以使用 reduxForm的 enableReinitialize prop在任何时候更改 initialValues更改表单，从而使您能够填充下游字段，并带有来自上游的值。

。

我将使用formValueSelector从Redux Store提取值并将其设置为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 {}

希望这会有所帮助！