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

Posted 2023-02-22

【中文标题】如何在页面上多次嵌入相同的 redux-form？

【英文标题】：How to embed the same redux-form multiple times on a page?

【发布时间】：2016-09-24 04:51:30

【问题描述】：

我在尝试在一个页面上嵌入多个表单时遇到问题。我注意到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);

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

【参考方案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 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!

【讨论】：

谢谢。差点又问了这个问题……希望它出现在我的网络搜索中！

谢谢。可以稍微澄清一下两个选项中的版本信息。我的建议：1. ...（Redux Form 5），2. ...（Redux Form 6+）

我注意到您写道，推荐使用 >5 模式。这个很棒的答案解决了我遇到的一个问题，但从未在任何地方的文档中看到过。你在哪里看到的？

我不记得了。文档说 form: 你的表单的名称和你的表单状态将被挂载到 redux-form reducer 下的键。由于您不想共享相同的数据，这就是要走的路。见github.com/erikras/redux-form/issues/…

哇，这让我死了好几个月。我一直怀疑这一点，但文档从未说明过，所以我一直认为我们应该做的事情是把 form 放在 reduxForm(form:'blah')(MyFormComponent) 行中。绝对杀了我。这怎么没有记录。以及为什么还要费心记录不好的方式。 React 是关于可重用组件的，表单是可重用的，但是使用 reduxForm(form:'blah')() 方法它变得不可重用对吗？如此误导 - redux-form.com/7.0.3/docs/api/ReduxForm.md/… - 它应该注意没有可重用性的后果