根据 react-final-form 的变化更新表单值的简单方法

Question

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

要求

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

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

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

---

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

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

• subscribre以形成经由FormSpy值onChange丙
• 每次值更改时更新反应参考
• 将 ref 值与新值进行比较并使用form.resetAPI 重置城市字段值而不触发验证

---

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

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

它要简单得多，因为我们不需要反应引用和 FormSpy。

---

这两种解决方案的作品几乎完全不同的是form.reset方法，重新定义形成initialValues引擎盖下，使RESET按钮不复位形式到原来的initialValues了。

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

Answer 1

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