时间戳

首页 > 解决方案 > 如何在页面/屏幕之间共享 react-final-form

react-final-form - 如何在页面/屏幕之间共享 react-final-form

问题描述

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

有没有办法将表单对象传递给另一个屏幕/组件并继续使用主表单中的状态处理/验证？

例子：

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 执行。我使用较旧的表单库进行了此设置，但我使用 Modals 来显示子表单，这些子表单内联在主表单中。但是我想停止使用模式，而是通过某种方式传递表单对象来推送一个具有子表单功能的单独屏幕（使用反应导航）。

标签： react-final-form

解决方案

我又摸索了一些，找到了一种方法。以为我会回答这个让其他人找到。

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

  • 该Form组件还采用表单实例作为道具

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

编辑：它也可以在屏幕之间完美运行。我通过 react-navigations params 对象将表单实例发送到子表单。

推荐阅读