分组和验证字段

Question

我们有一个表单，其中包含按屏幕（部分）分组的字段。这种分离仅在视觉上完成。屏幕在屏幕左侧命名并列出（始终可见）。如果这是当前可见的部分，则屏幕名称为白色。如果某个字段出现错误，屏幕名称将标记为红色，因此您始终知道哪个部分有错误。此行为在每个屏幕组件中实现（根本不是最佳的）。

客户端验证效果很好（并不总是通过验证器实现）。但现在我想实现相同的行为，如果我们从 API 收到错误。这意味着如果字段有提交错误，屏幕名称会显示为红色，而当该字段已被编辑时，屏幕名称不会显示为红色。

基本上我需要将输入字段分组到一个Screen 组件中，该组件订阅每个字段error、submitError 和dirtySinceLastSubmit。然后我需要在这个Screen 组件中定义一个新的状态变量valid，它检查所有子状态并根据每个子状态设置适当的值。

是否可以在 react-final-form 中对字段进行分组并订阅子状态更改？

Answer 1

我可能会考虑将它们分解为单独的表单并在父组件中管理表单的总值，例如在Wizard Example 中。您的另一个选择是订阅具有以下内容的字段集：

这在技术上有点调皮，hooks lint 规则会抱怨，但只要你从不更改字段列表，你应该没问题。