问题标签 [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 投票
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 投票
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 回答
1399 浏览

reactjs - 如何将`final-form-calculate`与`final-form-array`结合起来

我有一个表格,用于react-final-form-array有许多“与会者”。我希望每个 Attendee.Email 输入进行网络查找,然后根据结果设置 Attendee.FirstName 和 Attendee.Surname。

我不确定这应该如何用final-form-calculate装饰器来表达。具体来说,我不知道如何引用数组中的单个表单项。

这是我的开始:

0 投票
1 回答
905 浏览

javascript - 在 React 最终表单的向导表单页面中获取当前输入字段值

使用 Wizard form ant 试图了解如何在 {activePage}. 可以达到输入值Wizard.js但卡住Index.js有人知道我在哪里错过了重点吗?

编辑 React 最终形式 - 向导示例

0 投票
0 回答
274 浏览

javascript - 在最终形式重新初始化时保留脏表单值

有没有办法在重新初始化最终形式(keepDirtyOnReinitializeredux-form 模拟的标志)时保持脏值?

在我的情况下,我有一个很大的表单,我希望能够在子表单中编辑它的部分数据,而不会丢失父表单中的更改。

0 投票
1 回答
1362 浏览

reactjs - 集成 react-redux、react-final-form 和 react-bootstrap-typeahead

我正在尝试设置react-boostrap-typeahead以从redux商店获取数据,并将预输入状态存储为react-final-form. 问题在于react-bootstrap-typeahead它附加了多个状态,这两个状态都需要跟踪才能使此设置正常工作。

  1. 文本输入状态
  2. 选择的选项

我解决此问题的首选方法涉及final-form-set-field-data并在此处进行说明: https ://codesandbox.io/s/rl81o5765o

该代码将无法正常工作,因为Form组件不知道字段数据的更改。有没有更好的方法来解决这个问题?