问题标签 [final-form]

我需要在我的表单中实现recaptcha，但我不知道如何正确地做到这一点。

问题是 recaptcha 是异步的，当它处于不可见模式时，令牌几乎可以立即使用，但是当用户必须选择交通灯时，可能需要一段时间。

如何延迟发送表单，以便它可以等待令牌值并使用 onSubmit 将服务器端验证错误返回到表单？

也许我应该使用 react-google-recaptcha 以外的其他东西？

下面是一种可行的方法，但它看起来也很老套，应该有更好的方法来做到这一点。

我有一个简单的使用表格react-final-form。每次values更改时，此表格都会自动保存。当用户出于某种原因重新加载页面时，表单会从之前保存的值中获取 initialValues。它运行良好，但meta.pristine和其他属性meta未保存。可以恢复formState吗react-final-form？

我有一个自定义文件上传字段，一旦您选择/删除文件，就会立即上传文件，并返回一个 UUID 以供以后提交。所以，当你删除一个文件时，基本上现在大多数 web 应用程序（例如 Facebook、Twitter 等）都会这样做。

使用 final-form 处理这一切都很容易 -onChange一旦上传完成，我的字段只需调用 final-form 的函数以将 UUID 传递给 final-form。

但是，如果用户在上传仍在运行时提交表单，他们将提交没有文件 UUID 的表单，因为就最终表单而言，尚未选择任何文件。特别是对于较大的文件，这将是一个问题，因为用户可能没有意识到他们仍然需要等待（即使有加载指示器）。将字段标记为必填也不是一种选择，因为根本不提供文件是有效的（或者该字段可能允许多个文件，或者您正在替换以前上传的文件） - 所以该字段是“无效的”的唯一情况" 是当前正在上传文件的时间。

这是一个带有小型虚拟应用程序的代码框，应该为任何尝试解决它提供一个很好的起点：https ://codesandbox.io/s/poliished-fast-k80t7

这个想法是该字段在单击“假装开始上传”时变为无效，并在单击“假装完成上传”后再次有效。

请注意，我正在寻找一种干净的方法来做到这一点，同时保持事物分开，即我不想为此添加状态到包含Form- 的组件中，也因为验证函数需要是幂等的，所以检查外部状态会有很多破损（正如我尝试做的那样）。

如果代码和框链接中断，这里是第一个链接的相关代码（因为另一个只是一个损坏的尝试）：

我有一个使用 ag-grid 构建的最终形式的支持网​​格。Ag-grid 采用渲染，在我的情况下是用 FormSpy 包装的字段。使用 final-form 的 pre-hooks 版本可以工作，但我遇到了一些问题，所以我升级到最新版本并收到“[X] 必须在组件内部使用”错误。

我使用了 react devtools，果然，我的自定义字段渲染器/编辑器被移出上下文作为树末端的叶子。我的问题是，是否有任何解决方法可以使这项工作？有没有办法订阅特定的上下文？我知道有点反模式，但我的想法很少。

例子

这是具有较旧最终形式包的版本- https://codesandbox.io/s/final-form-ag-grid-lbq7f

我在Auto complete使用开发时遇到错误final-form

必须指定一个渲染道具，一个渲染函数作为子级，或者一个组件道具到 Field(auto)

我从这个链接 https://trejgun.github.io/articles/bindings-for-using-final-form-with-material-ui-autocomplete/获得帮助

但是当我实现上面的代码时，我遇到了错误

这是我的代码 https://codesandbox.io/s/relaxed-breeze-hv58o

我正在尝试实现Auto complete拥有checkbox.

https://material-ui.com/components/autocomplete/#autocomplete

但是当我在其中实现相同的组件时，final-form我无法检查我的选项，为什么？

这是我的代码 https://codesandbox.io/s/relaxed-breeze-hv58o

我在电子邮件输入字段中有自定义验证，由 触发form.reset()，它重置表单（用户成功提交表单后）。

我想知道如何在用户提交并重置表单后不触发验证？

你能告诉我为什么我的初始值没有在反应中设置吗？我正在使用react-final-form

这是我的代码

https://codesandbox.io/s/frosty-star-1qcw3

我的初始值打印在控制台中，但未在下拉列表中设置

react最终形式的API链接

https://final-form.org/docs/react-final-form/examples

我正在使用 React Final Form 来显示表单并处理表单提交。场景是我想在成功提交时清除所有表单字段，但显示绑定到最终表单submitSucceededFormState 属性的提交成功消息。

如果我使用form.reset()它会清除所有字段和验证，但也会清除submitSucceededFormState。

我可以通过手动浏览每个表单并删除字段值然后重置字段状态来实现此结果。问题是我想将此应用于任意数量的表单，并且不想手动覆盖每个字段，而是自动重置所有字段。

任何帮助在这里表示赞赏！参考：https ://final-form.org/docs/final-form/types/FormState

我正在使用 React Final Form 构建应用程序。在表单中，用户需要填写基本输入字段并添加问题及其选项。对于我正在使用FieldArray功能的问题和选择。所以，直到这里一切都很好并且工作正常。但是，我想在此表单中添加另一个功能。

正如您在下图中看到的，这是一个在内部渲染的 Card 组件FieldArray。每次用户单击添加问题按钮时，页面上都会出现另一个卡片组件。

我需要的功能是使Save按钮在右上角起作用。目前我不知道应该如何实现 Save 按钮，但我想要实现的是我想将图像中的 Card 组件切换到另一个 Card 组件，在那里我使用fields.value. 所以，没有输入字段。但是，我还想在单击保存时验证表单的这一部分。这是我不知道该怎么做。因此，每个保存按钮都会验证自己的字段，如果验证通过，卡片将切换到另一个卡片组件，其中数据是只读的。

因此，我需要您对验证部分的建议以及添加此功能的意见。

谢谢

编辑

我一直在阅读 FinalForm 和 ReduxForm 的文档，以弄清楚我该如何处理这种情况，但我还想不通。

我已经检查了 FinalForm 文档中的向导示例。但是我不确定它是否适合我的情况。<form>向导在页面上始终存在一个标签，当用户单击下一步按钮时，输入字段会切换。就我而言，我可能需要您提到的多个表单标签。

我以 3 个表单结构为例。你能告诉我要走哪条路吗？

import { Form as FinalForm } from 'react-final-form'

#1 基本形式：

构造表格的经典方式是目前的情况。所以，这不是解决问题的方法。

#2 一个 FinalForm 下的多个表单：

FinalForm 中的多个表单。这似乎是要走的路，但是“保存”按钮提交整个表单而不是它自己的表单。它使用的是相同的handleSubmit，所以这一定是原因，但我怎么能有不同的handleSubmit？用另一个包裹 FieldArray 内的表单标签FinalForm？

#3 单个 FinalForm 下的多个嵌套表单：

这是无效的 html。所以这一定是错误的方法，但是当我进行研究时，我发现了一个叫做 React Portals 的东西，它可能会有所帮助，但我认为它是不必要的。