首页 文章

我应该如何将reduxForm的子组件连接到redux状态？

提问于
浏览 次
2

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

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

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

reactjs redux react-redux redux-form

1 回答

  • 1

    但是我现在发现像removeField（）这样的功能在连接的子组件中不起作用 - 例如child_form.removeField（index）删除所有child_forms，而不仅仅是与索引匹配的child_forms .

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

    • Use action creators

    removeField 方法包装 removeArrayValue 动作创建者 . 您可以发送此操作以删除表单的条目 .

    // Removes the 4th row
dispatch(removeArrayValue("myform", "myarrayfield", 3))
    • Use a plugin

    在reducer插件中，您可以拦截操作并触发表单状态的修改 . 如果您发送操作，则可以拦截它并更新字段数组 .

    使用道具将所有内容传递到层次结构中会很快变得难以处理...

    我已经看到了几个解决方法 .

    • 使用相同的表单名称创建多个表单 . 内部Redux表单将合并它们，以便您的商店包含同一对象中每个子表单的数据 .

    • 使用 connect 连接子表单并使用操作创建器来操作状态 .

    • 将表单分成更小的部分并传递 fields . This is my favourite solution . 我们在我们的应用程序中成功完成了这项工作（超过一百种表格！） .

    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"]
    回复于

相关问题