reactjs - 根据 react-final-form 的更改更新表单值的简单方法

Question

我正在尝试使用react-final-form和material-ui实​​现一个具有两个连续依赖 Select 的表单

要求

• 这两个字段都是必需的
• 当用户选择国家值时
  • 城市字段应重置为空白
  • 城市字段不应标记为无效
• 用户应该能够随时完全重置表单

我很难用 react-final-form API 找到一个简单而优雅的解决方案来满足这个要求。

可能有使用mutators、react-final-form-listeners或decorators的方法，但在我看来，这似乎是一个常见的表单用例，没有高级 API 的简单解决方案会很好。

---

这是一个结合了FormSpy组件、useRef钩子和form.resetapi 的版本。

https://codesandbox.io/embed/react-final-form-material-ui-field-dependencies-hn7ps

• onChange通过FormSpy属性订阅表单值
• 每次值更改时更新一个反应参考
• 将 ref 值与新值进行比较，并使用form.resetAPI 重置 city 字段值而不触发验证

---

这是另一个使用声明表单规则方法的版本，react-final-form-listeners就像 Erik 建议的那样。

https://codesandbox.io/embed/react-final-form-material-ui-field-dependencies-ijxd0

它要简单得多，因为我们不需要 react ref 和 FormSpy。

---

这两种解决方案几乎都能完美运行，只是该form.reset方法initialValues在后台重新定义了表单，因此 RESET 按钮不再将表单重置为原始表单initialValues。

是否有内置方法来挂钩表单状态更改并比较旧/新值？

标签： reactjsformsmaterial-uireact-final-form

Answer 1

也许声明式表单规则是您需要的？