问题标签 [react-final-form-arrays]

在 React Final Form 中，我们可以使用formatorparse属性作为text类型输入，以便存储与指定值不同的值，但这似乎与复选框的工作方式不同。

例子：

在此示例中，无论使用and ，要存储的值仍然是trueor 。是否可以将值格式化为to ？falseformatparse[true, false]["foo"]

提前感谢您的帮助。

我需要根据用户在表单第一步提示的值生成一定数量的字段。

由于我正在使用“向导”类<Condition />组件进行多步骤表单不起作用。

基本上我需要访问值（从函数组件内的类中提取它们），以便告诉 React 它需要生成的“页面”数量。

像这样的东西：

为了根据用户创建的商品数量生成N页，每个商品一页。

这种方法不起作用，因为它告诉我没有定义值。

这是我的向导反应组件：

这是 FirstStep 组件（用户插入它的第一个值，它生成项目数组。我需要做的就是拉出状态的值，以便根据第一个数组的长度生成多个页面):

我正在使用 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 的东西，它可能会有所帮助，但我认为它是不必要的。

我有一个使用react-final-form. FieldArray最终用户可以添加 X 个房间类型，然后根据该数量下一步将生成房间数组。

这是一个现场演示-codesandbox

现在，当涉及到第二步（房间配置）时，我需要在一个正在进行的过程中设置默认值：当用户选择成人的最大数量时，最大儿童的值应该设置为该数字减 1。

我在（调用方法）<OnChange>内部使用组件。 它有效，但问题是它改变了对象内的所有值。您可以在上面的演示中检查此行为。FieldArrayfields.update()

我不知道出了什么问题。

提前感谢您的帮助。

这是一个奇怪的情况。我已经简化了一个 react-final-form-array 的示例，它允许我向我的表单添加元素，并且我可以扩展一个对象数组。它与 react-final-form-arrays 提供的简单示例非常相似。该数组工作得很好，但我遇到的问题是当我尝试删除特定元素时，输入中显示的实际值不会改变。例如，对于图像：

在这里我们可以看到我可以将客户添加到一个列表中，这会产生一个对象数组。这很好用。现在，假设我想摆脱第一个元素。我点击 X，会发生什么？

在这里我们可以看到表单数据正确地删除了我想要删除的第一个元素，但是，输入上显示的实际值仍然是 John Doe，尽管表单知道它是 Mary Jane。当我单击输入时，它们似乎更新为正确的值。但这不是应该发生的事情。

最奇怪的是，我做了一个代码框，你可以在这里看到https://codesandbox.io/s/agitated-wilson-5xlqq

它具有与我的应用程序完全相同的代码，并且可以按预期工作！所以我什至无法重新创建错误，我确保依赖项与我正在使用的版本相同。我只能在我自己的设置中重新创建它，我不明白为什么会这样。

我尝试了 chrome、safari 和 firefox，它们似乎都在我的电脑上做同样的事情，我什至通过连接到我的笔记本电脑上运行的 react 服务器在我的手机上进行了尝试，它们都表现出相同的行为。

我不知道我可能是什么，版本，反应，如果有人有任何想法或过去有类似的问题，请帮助。我不会在此处粘贴我的代码，以免使这篇文章变得臃肿，但您可以看到它与我上面链接的沙箱中的代码完全相同。

编辑：我想指出另一个发生的错误，那就是一旦我删除第一个元素，如果我尝试编辑它，它会将另一个字段与我刚刚添加的输入一起推送到数组中，就好像它被绑定或其他东西一样。我希望我可以在代码沙盒上重新创建它

我从 Angular 开始，我很难在表单中设置 FormArray。总之，我所做的是：

• 创建 2 个表单：主表单 (valForm) 和另一个动态创建的表单 (holidaysForm)。
• 将第二种形式的值复制到一个数组。
• 将 Array 的值加载到 FormArray 中。

遵循以下代码：

.ts

.html

从理论上讲，代码运行良好且没有错误，问题是结果总是这样：

主表格

假期表格

有谁知道我可能做错了什么？谢天谢地，

我很难访问字段数组中的对象以计算字段 price * quantity = total 。已经为装饰字段尝试了一堆正则表达式，包括field: /invoiceItems\[\d+\]/ ,从这个 PR 访问和解决方案（https://github.com/final-form/final-form-calculate/pull/21/commits/dab00f8125079fed402712a4b0ed71663be0ba14）

在 PR 我无法访问索引。使用最终形式计算和数组进行计算的最佳方法是什么？我也在 Formik 中尝试过，但遇到了同样的问题。

代码

形式：

字段数组：

这是我尝试过的一些装饰器。（这是一场灾难，有这么多不同的尝试&忽略数学，因为我们只是想让它工作）

我正在尝试根据传递给组件的条件渲染字段，如下所示

);

而且我不确定上面的代码在哪里做错了，isProjectSystem是布尔变量传递给了这个组件

我正在使用带有最终表单适配器插件的 React JS 任何人都可以提出任何关于此的想法，将不胜感激。提前致谢

我正在尝试通过在下面编写函数来使用 react final form mutators 更新表单状态中的值

然后我像下面这样调用那个 mutate 函数，

我想使用 mutator 函数将布尔值设置为 true，就像我设置相同（在注释代码中提到）并得到类似的错误mutate is not a function。

我是对最终表格做出反应的新手，任何人都可以就这个问题提出任何想法或建议。

提前致谢

当我与 react-final-form-arrays 连接时，我有动态表单并且在 Material-ui 中遇到 Autocomplite 组件问题，无法获取所选项目值

这是表单代码