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

Question

我在尝试在一个页面上嵌入多个表单时遇到问题。我注意到 configForm 执行一次，即使页面上有多个表单，这就是为什么我不能动态生成不同的表单名称。

Screenshot showing multiple text fields bound together.

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 形式 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 Form 5 及更高版本）

从Redux Form 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!

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

How to embed the same redux-form multiple times on a page?

reactjs

redux

redux-form