问题标签 [final-form]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
315 浏览

react-final-form - 如何以 react-final-form 转换“values”对象?

我的情况如下。我有一堂课,说MyData

我想将它与 React 最终形式一起使用,如下所示:

这是否可能,无需MyData在每个渲染上构造一个实例?(这并不理想,因为我们正在缓存一些昂贵的计算。)

0 投票
2 回答
83 浏览

react-final-form - 如何挂钩 react-final-form 更新?

我想加入 react-final-form 的更新。那可能吗?也就是说,我希望能够执行一个任意函数来更新 react-final-form 负责的数据。特别是,我有一个Model带有update方法的类,我希望能够调用instance.update({ [fieldName]: fieldValue })而不是更新 react-final-form 使用的普通 ol' Javascript 对象。这可能吗?

我想做的一个例子如下:

0 投票
1 回答
752 浏览

reactjs - 将 Select.Creatable 与 React 最终形式一起使用

我们有一个表单,它是 React Final Form,并希望在该表单中有一个可以选择和创建的字段。

我如何在反应最终形式中使用这样的组件。

目前,我尝试在表单内使用 react-select 的 Select.Creatable,但是一旦我从下拉列表中选择某些内容并更新状态,表单就会变得清晰,即回到其初始状态。

请帮忙!

0 投票
1 回答
29 浏览

reactjs - 如何根据服务器调用制作动态表单

我是 React-Final-Form 的新手。我需要根据用户从表单的下拉菜单中选择的内容来呈现表单的某些部分。因此,表单开头有一个下拉列表,当用户从该下拉列表中选择一个国家/地区时,我需要进行 ajax 调用(通过 axios),然后根据我从服务器得到的响应,我应该呈现表单的其余部分。我应该在哪里进行服务器调用?

0 投票
1 回答
56 浏览

react-final-form - 如何让提交错误正确显示?

我正在设置一个注册表单,它使用React Final Form来处理表单状态。我的浏览器验证工作得很好,但是当我从服务器收到验证错误时,我无法弄清楚如何让它们正确显示。

我研究了文档中包含的提交错误示例。我真的看不出我的代码与该代码有显着差异。似乎只需要返回一个对象,其中键是字段名称,值是要显示的消息。

这是用于 FormonSubmit道具的方法:

在 catch 代码中,我正在解析我相信它所期望的对象形式的错误。这是我要返回的实际对象:

我希望这会在电子邮件字段下显示消息。事实上,它不显示任何内容。

感谢您对此的任何帮助!

0 投票
1 回答
720 浏览

react-final-form - 更新 react-final-form 中的表单状态

我想根据我的自定义条件将表单状态设置为无效。我需要基于它禁用提交按钮。

我扫描了 react-final-form 文档,但找不到相同的方法。有什么办法吗

0 投票
1 回答
2229 浏览

javascript - React-final-form 在某些表单字段上触发验证

我想验证某些操作的特定字段。

我有一个包含多个字段和内部表单的表单,有一个部分包含 4 个字段和一个单独的按钮,例如Test connection. 因此,在按下该按钮时,我想发送一个 API 调用,但在此之前,我想在这些特定字段上显示验证错误。我找不到办法做到这一点。如果你们知道,请告诉我。提前致谢。

0 投票
5 回答
14757 浏览

javascript - 如何在 React Final Form 中重新运行验证

验证表单的字段后,提交不会触发重新运行验证。有没有办法在提交表单时触发重新运行验证?

我有一个表单字段,如果未在特定时间范围内提交,其值可能会变为无效。它不是异步的;我只是试图涵盖用户暂时不点击提交的场景,当他们最终点击提交时,该值将变为无效。最终形式会记住在值更改后立即发生的验证结果,这意味着无论验证和提交之间经过多长时间,未更改的值仍然有效。这是我想要改变的行为;在我的用例中,干预时间很重要。我曾尝试使用包中的beforeSubmit侦听器,final-form-submit-listener但它只允许访问该FormApi对象。我尝试使用pauseValidationandresumeValidation函数FormApi但他们无法实现我想要的,或者我没有正确使用它们。我有一种感觉,如何做到这一点非常明显,但我无法弄清楚。

我创建了这个沙盒来说明我的意思。

谢谢!

更新:一些附加信息:

  • 这是一个时间选择器。如果您要选择今天的时间,您可以选择 15 分钟后的时间。它现在有效,因为它现在在未来。如果您在接下来的 20 分钟内未触摸表单然后单击提交,则应阻止提交,因为您选择的时间现在是过去 5 分钟。
  • 我考虑过直接在提交处理程序中添加验证。这里有两个答案。但是,这对我来说并不理想,因为最终表单不会收到错误并将它们传递给meta表单字段的对象。我的代码库很复杂,并且严重依赖meta对象来显示错误消息。尝试在提交处理程序中复制该功能可能会起作用,但它很hacky并且违反了整个代码库中使用的约定。
0 投票
1 回答
212 浏览

javascript - 在更新最终表单中的表单值之前要求用户确认

我正在使用 react-final-form 并有 2 个无线电字段(是/否)。当“是”是当前值并且用户选择“否”时,我想显示一个模式,要求用户确认。如果用户取消,该值应该保持不变,如果用户确认,它应该更新。

有没有办法用当前版本的 react-final-form 或 final-form 来做到这一点?我查看了文档并注意到了beforeSubmit,但是没有看到类似的东西beforeChange

0 投票
0 回答
675 浏览

reactjs - react-native:最终形式关注下一个字段

我无法将我的下一个领域集中在最终形式、反应原生和功能组件上。这个案例有 0 个文档。