问题标签 [react-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 回答
1333 浏览

reactjs - 如何在 final-form 和 Material UI (v1) 中做嵌套对象?

我希望提交时的最终表单对象看起来像这样

我该怎么做?我知道我可以使用点语法并做同样的事情

但我想允许自由形式按钮添加key: value或删除它们,类似于代码框示例

我看到了一个示例,可以为我想做类似但对象而不是数组的数组执行此操作。

最终形式自述文件中的代码框示例链接。这是一个数组构建器。

我想做一个对象生成器,就像上面的例子一样。

我正在使用 Material UI V1 beta 23 Final formreact final form最新版本

0 投票
2 回答
1754 浏览

forms - 反应最终形式的多部分数据

我正在使用react-final-form来处理组件中的表单数据。
如何使用提交多部分表单数据react-final-form

0 投票
1 回答
9125 浏览

reactjs - 如果反应最终形式触及形式之外的状态,有什么办法可以得到

我在另一个组件中使用反应最终表单,比如对话框 div,我想在关闭此对话框 div 之前检查此表单是否已更改(以显示诸如“您有未保存的更改”之类的消息)。

这是一个示例,我不知道如何在最终表单更改的表单中调用 onChange - 在标记中,如果我使用一些自定义输入并且在验证方法中它看起来太脏,它将无法工作。

和一个表格

0 投票
2 回答
4735 浏览

react-final-form - 访问 react-final-form 组件上同级字段的值

我在 react-final-form 表单上有两个选择字段。选择字段有一个“选项”列表以显示在下拉列表中。我想做的是确保第二个下拉列表中可用的选项被第一个下拉列表中选择的项目“减少”。

所以这需要第二个下拉列表知道在第一个下拉列表中选择了什么值。这是我想要实现的概念:

但是我看不到访问表单上其他字段值的方法。鉴于“fruitOptions”列表不是它自己的字段。

0 投票
3 回答
1923 浏览

reactjs - react-final-form - 反应日期集成

我无法将 react-dates 与 react-final-form 集成。

如果我使用表单中的 change(name, value) 函数向 react-dates 的组件添加 onChange 回调,则名称不会保存到表单状态(我想是因为必须在使用更改之前注册该字段)。

是否可以手动注册一个字段?

编辑:我找到了一种方法,添加了一个隐藏字段,但我不喜欢那样......

编辑2:添加测试表格:

编辑 React 最终形式 - 简单示例

0 投票
3 回答
4758 浏览

javascript - 使用 React 最终表单进行自定义验证

我正在尝试在输入框中添加一些仅允许数字(数量)的自定义验证。根据此处给出的示例,我尝试添加自定义验证。

我最终形式的领域就像

没问题,它不允许我正确添加数字。我阅读了文档,但找不到任何帮助解决方案。

反应最终形式:https ://github.com/final-form/react-final-form

任何建议都会非常有帮助。

0 投票
2 回答
33293 浏览

reactjs - 如何从外部用户操作 React Final Form 设置/更改字段值

在很多情况下,我们可能希望在表单中设置特定字段的值以帮助用户。

例如,在线水果店可能会询问用户他们想买多少苹果。为了帮助用户,我们可以有 3 个按钮,例如

  • "minimum" - 将字段值设置为商店可以销售的最小数量
  • “最大” - 同上,但最大
  • “我上次买的东西” - 将字段值设置为用户上次购买的苹果数量

在查看了我认为最相关的两个示例(加载和初始化值计算字段)之后,我仍然无法在不变得太笨拙的情况下弄清楚这一点。

我们如何从用户的操作(例如单击按钮)中设置字段的值?

0 投票
2 回答
3296 浏览

javascript - 如何在数组react-final-form中设置错误

我对 react-final-form 中的错误有一些问题。我不知道如何在数组中设置错误。有人可以给我一个例子吗?谢谢。

只需为此示例设置验证。 https://codesandbox.io/s/kx8qv67nk5

0 投票
1 回答
2269 浏览

javascript - 将值传递给 React Final Form 中的另一个组件

使用向导表单示例创建具有当前输入值的组件。奇怪的是,组件是相同的,但是当组件返回空对象时,只有Wizard组件返回具有初始值的对象。Slider最重要的是,是否可以保持值更新?

更新

我的问题是输入类型范围样式:https ://codesandbox.io/s/w65rq7ok4w 。尝试创建一个组件,该组件将返回具有动态变化宽度的 div,该宽度取决于输入类型范围值,例如使用 css 渐变的输入范围进度

0 投票
1 回答
3939 浏览

javascript - 在 React Final Form 的条件下将输入值重置为初始值

https://codesandbox.io/s/xjxx7xp07q中设置values.rangeinitialValues.range之后如何重置 ?conditiontrue

你能告诉我哪里漏掉了重点吗?非常感谢所有可能的帮助。

更新

找到工作示例 - https://codesandbox.io/s/l706w7yr2q,但不知道如何将组件重构为向导表单案例 xD 任何帮助表示赞赏,我应该从哪里开始?