3

我有一个相当复杂的多级深层/嵌套表单，使用reduxForm(). 由于表单非常大，我将它的一部分分解为子组件。其中一些组件需要访问 Redux 状态，因此需要通过 props 或 be 传递连接connect()ed。但是，当我使用普通的 Reduxconnect()函数连接子组件时，无法编辑其中的 redux-form 字段。所以我尝试使用reduxForm()连接子组件以及父组件，这感觉不对，但似乎工作。

但是我现在发现某些功能removeField()在连接的子组件中不起作用 - 例如child_form.removeField(index)删除所有child_forms，而不仅仅是与索引匹配的那个。

将组件的子组件连接reduxForm()到 redux 状态的正确/最佳实践方法是什么？使用道具通过层次结构传递所有内容将很快变得笨拙......

4

1 回答 1

2

但是我现在发现某些功能removeField()在连接的子组件中不起作用——例如child_form.removeField(index)删除所有的child_forms，而不仅仅是与索引匹配的那个。

有两种方法可以解决这个问题：

  1. 使用动作创建者

    该removeField方法包装了removeArrayValue动作创建者。您可以分派此操作以删除表单条目。

    // Removes the 4th row
dispatch(removeArrayValue("myform", "myarrayfield", 3))

  2. 使用插件

    在 reducer 插件中，您可以拦截操作并触发对表单状态的修改。如果您调度一个动作，您可以拦截它并更新字段数组。

使用道具通过层次结构传递所有内容将很快变得笨拙......

我已经看到了几种解决方法。

  1. 使用相同的表单名称创建多个表单。Redux Form 会在内部合并它们，这样你的 store 就会包含同一个对象中每个子表单的数据。

  2. 使用连接子表单connect并使用动作创建者来操纵状态。

  3. 把你的表格分成更小的部分并通过fields。这是我最喜欢的解决方案。我们在我们的应用程序中成功地做到了这一点（在一百多个表格上！）。

    const MainForm = reduxForm({
  form: "main",
  fields: [
    SubForm1.fields,
    SubForm2.fields,
    SubForm3.fields,
  ]
})(
  props => (
    <form onSubmit={props.handleSubmit}>
      <SubForm1 fields={props.fields} />
      <SubForm2 fields={props.fields} />
      <SubForm3 fields={props.fields} />
      <button type="submit">Send</button>
    </form>
  )
)

const SubForm1 = ({fields}) => (
  <div>
    <TextField {...fields.foo} />
    <TextField {...fields.bar} />
  </div>
)

SubForm1.fields = ["foo", "bar"]
于 2016-06-09T06:44:49.327 回答