问题标签 [final-form]

如果在其中输入了值，我想根据需要真正验证模糊和条件显示范围字段。如果两个值都被删除，错误应该会被清除。

https://codesandbox.io/s/range-validation-via-values-subscription-o99zm

哈克：我可以通过缓存最后的元数据值来模拟模糊验证，并且检查是否已访问是真的，但是我必须在清除两个字段时重置两个字段的字段状态否则访问将是真的，随后的数据输入和错误将过早显示。我相信这会让我一路走来，但这感觉违反直觉，并且由于 FormSpy 订阅了值。

是否有另一种方法可以使用 API 来完成此操作？我是否应该在最终形式之外的“范围”上缓存值以避免订阅值？我在混淆事情吗？谢谢。

例如，我有这个简单的字段。如何通过单击按钮仅重置此字段

我正在编写一个测试来满足以下业务规则：

如果我们Canada从国家下拉列表中选择，如果省和邮政编码字段为空，则在模糊上显示错误消息。

我正在测试的 React 最终形式是：

我正在编写的测试如下所示：

我正在尝试触发错误消息-它会被渲染出来role="alert"-但我的测试失败了：Unable to find role="alert"

现在，如果我删除name我试图过滤的属性，alert则会找到：

我可以检索警报findAllByRole并对其进行迭代，但我真的只想用可访问的名称显式查询每个警报，并断言它们在文档中。

我在调试屏幕时看到了元素，我只想弄清楚如何使用它的角色和名称直接查询它：

示例表格：https ://codesandbox.io/s/react-ts-unit-test-example-6scjc?file=/src/ContactForm.test.tsx

我需要将滚动添加到表单中的第一个错误。我找到了几个解决方案：

1. 额外的包裹- 不起作用

2. 此处讨论的代码

我的问题是第二种情况只适用于第二次。在我第一次提交之前errorclassName 还不存在，它只在提交后出现，并且el是null. 但是第二次和下一次它一直有效，如果我不从渲染中删除错误类名。

我该如何解决？

在提交更新现有值的表单时，我分派了一个 redux 操作创建者。

当后端收到表单值时，服务器以更新的数据进行响应，react-final-form 将其解释为提交错误（invalid来自 react-final-form 的 prop 保持不变true，即使表单已成功提交）。我怎样才能防止这种行为？

我一次只更新一个字段，即name在提交表单时，但服务器响应包含整个数据片段以更新 redux 存储）。我得到的验证错误是：

请注意，该company/UPDATE_INFO_SUCCESS操作已被触发。

我确实在有关表单提交的文档中看到了以下部分

3. 与 Promise 异步返回一个 Promise<?Object>，它在成功时解析为没有值，或者在失败时解析为提交错误的对象。它解决错误的原因是在出现服务器或通信错误时留下拒绝。

但这种行为是非常不可取的。

我想在打开表单时检查“精确”单选按钮：

单选按钮保持未选中状态。知道我应该如何让它工作吗？注意使用<Field component="input" type="radio" .../>不是我的选择。

Codesandbox：https ://codesandbox.io/s/react-final-form-reset-after-submit-forked-q6jyv?file=/index.js:359-1235

我正在尝试将字段键入数字：

但是，当我单击单选按钮时，捕获的值是一个字符串，因此它与Field

有什么方法可以将值捕获为字符串以外的数据类型？

https://codesandbox.io/s/strongly-typed-form-values-with-react-final-form-forked-cvn4t?file=/src/index.tsx:918-2141

我有一个基于 Material UI 和 React Final Form 的简单注册表单。如果可能，Chrome 自动填充会自动填充电子邮件和密码输入。电子邮件字段具有自动对焦功能。当表单被自动填充时，输入变为“阻止”鼠标交互（我无法放置或查看插入符号，无法选择电子邮件的一部分，没有应用自动对焦），但它可用于使用鼠标和键盘进行拖放复制相互作用。我不知道这怎么会发生，也不明白如何提供代码进行复制。也许一些自动对焦问题？希望任何人都可以提供帮助。

我已经增强了 Context 的调度，类似于这篇博文中描述的内容。此外，就像 Redux 一样，我可以创建一个中间件链，我的所有操作都将贯穿它。基于来自 Real World Redux 的这个中间件示例，我有一个中间件可以集中处理所有 API 消耗。

这意味着我的组件调度操作来发起 API 请求，并且不能轻易地观察代表该异步操作的承诺。因此，我不能将该承诺传递给 RFF 的handleSubmit. 相反，我需要创建自己的异步函数来传递handleSubmit并通过观察应用程序状态的变化来解决它的承诺。

@erikras 创建了Redux Promise Listener，它使用中间件观察调度的动作来解决类似的问题。

我第一次创建了一个 React 钩子，它通过观察状态变化来解决 Promise，但感觉很尴尬：

用法：

这个问题是否已经在其他地方以较低的复杂性解决了？

我有一个场景，我有多个网格，每个网格中可以有多个可以删除的行。

我想做类似<FieldArray name="document[0]">的事情，我可以给网格添加和删除功能，但似乎 fieldarray 只需要单个节点。有解决办法还是我做错了什么？

最初我有document1: { [{...fields}] }这么 useField 看起来像这样：

但由于 ag-grid 和单元级别验证的问题，我想使用 yup 模式验证，所以我认为如果我使用通用键会更容易。