问题标签 [react-final-form]

因此，我使用我在注册页面中使用的 React-Final-Form 构建了一个向导表单。我试图弄清楚如何在最后一页上显示所有用户输入，以便用户在提交之前仔细检查/验证他们的输入。任何帮助将不胜感激！

（PS - 我在发布之前尝试对此进行研究，但我所能找到的只是将用户输入存储在 Redux 中并从那里访问它们，如果可能的话，我想避免这种情况。）

这是一个示例链接，显示了我想要做的事情 - 如果您想找出解决方案，请随时分叉并使用它！https://codesandbox.io/s/0332k02x0v

这是代码，缩短为仅包含相关位：

我的 Wizard.js 页面：

我的 index.js 页面：

我正在尝试使用react-testing-library来测试react-final-form。它适用于click-events，例如更改复选框，但我无法使用change-events。

下面是一个使用 jest 作为测试运行器的示例：

TestForm.js：

测试.js：

我运行这个使用npx jest test.js并且第一个测试通过但不是第二个。

似乎不起作用的关键部分是

有什么建议么？

我需要final-form能够添加表单字段记录数组。但是一次只显示一个数组字段。就像在左侧我将有客户id或index哪个用户将选择，在右侧我必须显示与该客户相对应的客户index。我可以添加reac-final-form-array，但它总是显示所有数组元素。什么应该是仅显示选定客户的正确方法。

请检查以下代码以供参考。希望我的问题很清楚，如果没有，请告诉我，将添加更多解释。

添加新客户：

目前它看起来像：

我需要它看起来像这样：

我的代码正在运行，但我收到了警告：

警告：从 React Final Form v3.3.0 开始，props.mutators 已被弃用，并将在 React Final Form 的下一个主要版本中删除。改用：props.form.mutators。检查你的 ReactFinalForm 渲染道具。

用这个例子：

https://codesandbox.io/s/kx8qv67nk5

如何做正确的方法？

我正在为我的一个字段设置解析器，例如，如果用户键入“Honda”，它将获得匹配的 DB 值，例如：{make: 'Honda', id: 5, year: '2012'} 等。我当我从 API 获得响应时，想设置字段值。

是否可以代替以下

设置如下值：

我想知道redux-form Fields标签中的等价物是什么React-Final-Form？

我需要处理单个组件中多个相关字段的错误，以便在某个子字段出现错误时显示公共标签的错误状态。

我想如何实现这个场景对我来说并不完全清楚？

我正在尝试实现异步验证react-final-form-array。但它的回报承诺但根本没有显示错误。

我参考了这段代码进行 asnyc 验证，并在此处使用最终表单数组创建了我自己的版本。

形式：

验证功能：

我对 React Final Form 有一点奇怪的问题。我正在使用文档中的向导模式。如果我将 a 传递subscription给表单，则只有上一步中的字段显示为已注册。如果我没有通过，subscription那么所有步骤的所有字段都已注册，这就是我想要的。

我是否需要订阅另一个州才能取回所有已注册的字段？

我基于 react-final-form 创建了向导。只有第一页被更正显示。单击下一步时，下一页显示为空。为什么会这样？

这是我的表格

这是以多种形式显示的组件：

这是向导组件：

完整的例子可以在这里找到： https ://codesandbox.io/s/8l5qn573o2 提前谢谢你:)

我用 react-final-form 创建向导表单。当我单击一个按钮时，我收到此错误：

我不明白为什么会出现这样的消息。这是我的向导组件。

当我点击按钮时，该功能handleSubmit可能没有被触发，因为console.log没有显示。谁能知道为什么会出现这样的消息？我在这里先向您的帮助表示感谢。