如何在 pages/screens 之间共享 react-final-form

How to share react-final-form between pages/screens

我需要将表单拆分为子表单。子表单将在 React-Native 中呈现在不同的屏幕上,但我需要它们成为同一表单处理对象的一部分。我需要从每个子表单访问完整的表单状态(对于所有字段),但每个子表单只会呈现一些字段。

有没有办法将表单对象传递给另一个screen/component并继续使用主表单中的状态handling/validation?

示例:

MainForm
  FieldX
  FieldY
  Button to open subform A
    SubFormA
      FieldA1
      FieldA2
      FieldX <- reused from main form, might be readonly in subform A
      Button to go back to main form
  Button to open subform B
    SubFormB
      FieldB1
      Button to go back to main form

表单的实际提交只能从 MainForm 执行。我使用较旧的表单库进行了此设置,但我使用模式来显示子表单,这些子表单内联在主表单中。但是我想停止使用模式,而是通过以某种方式传递表单对象来推送具有子表单功能的单独屏幕(使用反应导航)。

我又摆弄了一些,找到了一种方法。我想我会回答这个问题让其他人找到。

  • Form 组件的渲染 属性 实际上获取表单实例作为参数。

  • Form组件也将表单实例作为prop

这两个特性使得将表单实例简单地传递给另一个表单组件成为可能。我在同一个屏幕上试过这个,它就像一个魅力。我希望当我使用 react-navigation 推送下一个屏幕时,我不会遇到主要 Form 被卸载的麻烦。


编辑:它在屏幕之间也能完美运行。我通过 react-navigations 参数对象将表单实例发送到子表单。

您可以使用 React Redux 拥有一个能够共享所有信息的商店。 创建您的商店并发送您的操作,然后您可以从那里获取表单的所有变量(字段)。