问题标签 [final-form]

作为开发人员，我想在用户使用 React Final Form 成功提交表单时禁用“提交”按钮，如果用户在表单中输入一些新文本，则启用“提交”按钮。

当前的

该变量仅在第一次加载表单时pristine将禁用道具设置为，但是当用户提交表单（不重新加载页面）时，该变量是并且我希望它是为了禁用“提交”按钮。truepristinefalsetrue

期望的行为

• 首次加载表单时，提交按钮被禁用。
• 当用户输入文本或进行更改时，会启用提交按钮。
• 用户单击提交并成功后，提交按钮被禁用。
• 如果用户在提交后输入更多更改，则应启用提交按钮。

当前行为示例

https://codesandbox.io/s/github/final-form/react-final-form/tree/master/examples/simple

我的调查

我尝试使用 Final Form 提供的以下变量的组合，但结果不成功pristine, touched, submitSucceeded,lastSubmittedValues

它写在文档中，即

<Field/>只要订阅的字段状态发生变化，就会重新呈现。

所以，如果我有几个字段，它们都将被重新渲染，而只更改其中一个。有什么方法可以防止其他字段的重新渲染，目前没有改变？

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

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

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

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

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

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

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

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

有没有办法重置表单并同时设置状态？我尝试了下面的代码，它似乎不起作用。任何输入表示赞赏。

所以，我很难弄清楚这一点。基本上我有一个与 React Final Form 无关但在Form标签内的组件。主要的方法是当用户点击一个按钮（在这种情况下是一颗牙齿）时，它的值会发生变化并用紫色填充以显示它是否被点击——如果没有被点击则用白色填充。但是当我填写表格并单击具有牙齿的组件时，整个表格会重新呈现。有没有办法处理这种行为？也许我弄错了，这与我的自定义组件有关。

代码有点大，所以我将举例说明它是如何构建的：

}

解决了！ 我正在使用 useState 重新渲染以更改其状态。只需使用 let 将 setTeeth 更改为一个简单的变量。

我构建了一个 react-final-form 可以跨多个选项卡呈现。我有一个Tabs组件可以跟踪活动选项卡索引并显示适当的TabPanel.

当我创建TabPanels 时，我指定一个键shortid.generate()来生成唯一值。

更新深度超出错误表示错误发生在react-final-form'sField组件中：

我真的对此感到困惑......为什么打电话会shortid.generate()导致这种行为？我可以把它换掉，key={new Date().toString()}表格渲染得很好。

显示问题的 CodeSandbox：https ://codesandbox.io/s/react-final-form-field-arrays-ksx15

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

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

代码

形式：

字段数组：

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

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

);

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

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

我有一个用例，我想从外部设置反应最终表单的表单状态。

通过表单状态，我的意思是，以下

1. 错误
2. 原始的
3. 肮脏的
4. 提交...

有没有办法做到这一点？

我想通过单击单选按钮而不是经典的提交按钮来提交向导表单的步骤。

无线电组件：

我的课 ：

这在我使用提交按钮时有效，但我想删除它并直接单击单选按钮提交城市。