如何在页面上多次嵌入相同的redux-form？

Question

我试图在一个页面上嵌入多个表单时遇到问题.我注意到configForm执行一次,即使页面上有多个表单,这也就是我无法动态生成不同表单名称的原因.

截图显示绑定在一起多个文本字段.

function configForm(){
  const uuid = UUID.generate();

  const config = {
    form:`AddCardForm_${uuid}`,
    fields:['text'],
    validate:validate
  }

  return config;
}

export default reduxForm(configForm(), mapStateToProps, {togglePanelEditMode, addCardToPanel})(CardFormContainer);

如何添加表单以使它们彼此独立？

Answer 1

有两种方法可以在页面上多次嵌入相同的表单.

1.使用formKey(Redux Form 5)

formKey是使用redux-form@5(或以下)时这样做的官方方式.您必须从父级传递密钥以标识表单:

panels.map(panel =>
  <PanelForm key={panel.uuid} formKey={panel.uuid} initialValues={panel} />
                              ^^^^^^^ 
                       declare the form key
)

您的表单定义是:

reduxForm({form: "AddCardForm", fields: ["text"], validate})

但是这种模式已被删除redux-form@6.

2.使用唯一form名称(Redux表格5及以上)

自Redux表6以来,以下模式是识别表单的推荐方法.它与以前的版本完全兼容.

panels.map(panel =>
  <PanelForm key={panel.uuid} form={`AddCardForm_${panel.uuid}`} initialValues={panel} />
                              ^^^^ 
                    declare the form identifier
)

您的表单定义是:

reduxForm({fields: ["text"], validate})
// No `form` config parameter here!