如何在单个容器的单个页面上集成多个 redux-forms

Question

我对 react 和 redux 比较陌生。我有一个容器呈现一个呈现多个页面的单个组件，每个页面呈现多个 redux-forms。言归正传，我在同一页面上有两个表格。但由于我使用的是单个容器，因此它在 redux 中注册为通用表单名称。我已经处理了添加和编辑，但无法验证表单。如果我试图验证另一个表单会引发验证错误（必需）。 我用， 反应 原子设计（弧） 还原形式

为了解决问题，一些代码示例将是..

//container

const FormContainer = reduxForm({
  form: 'CompanySettingsForm',
  onSubmit,
  onChange,
  destroyOnUnmount: true,
  enableReinitialize: true,
  destroyOnUnregister: true,
})(CompanySettingsContainer)

export default connect(mapStateToProps, mapDispatchToProps) 
(FormContainer)

//component(diffrent forms for add and edit due to some unfortunate 
design layout)

//edit
<Form onSubmit={handleSubmit}>
 // more fields..
 <Field
  name="department_category"
  component={ReduxField}
  label="Department category name"
  placeholder="Enter department category name"
  validate={[required, min3Chars]}
 />
 <Button type="submit">Submit</Button>
</Form>

//add
<Form onSubmit={handleSubmit}>
 <Field
  name="comp.department_category"
  component={ReduxField}
  label="Department category name"
  placeholder="Enter department category name"
  validate={[required, min3Chars]}
 />
 <Button type="submit">Submit</Button>
</Form>

我们遵循这种模式， 但你明白了..

这两个表单嵌入在同一页面上，但是，为了避免冲突，我将字段命名为唯一字段，并从 onSubmit 中解构。

if (data.comp) Object.assign(submitData, data.comp)

我知道这不是正确或最不明智的方式，但由于交付至关重要，因此不能花太多时间。如果有人可以提供如何在这种情况下使用唯一的表单名称（必须使用单个容器）以及如何使用模式 formKey-^6-version 进行正确反应，那将很有帮助。请以您自己的模式提供完整的代码示例，我会 转换为我的。（我希望有一种模式可以让我在每个表单中使用相同的字段名，但这不是必需的）。问题是

1.使用相同的字段名称：redux 将其识别为相同，键入一个字段会导致另一个字段发生变化（如您所知，这是基本行为）

2.在我的 redux 开发工具中，页面中的所有字段都已注册，而与不同的表单无关（这是合理的，因为我使用的是相同的表单名称）。但提交仅限于一种形式，所以不必费心。

提前谢谢..

Answer 1

也许你可以为你的 redux 商店使用这种架构：

{
         'form-key-edit': {
              'field-a': 'value-a-edit',
              'field-b': 'value-b-edit'
         },
         'form-key-add': {
             'field-a': 'value-a-add',
             'field-b': 'value-b-add'
         }
}

和onSubmit(form-key) 和onChange(form-key, field)