一种简单的方法，可根据反应最终形式的变化来更新形式值

Question

我正在尝试使用具有 react-final-form 和 material-ui

的两个连续的从属Select来实现表单

要求

• 两个字段均为必填
• 当用户选择国家/地区值时
  • 城市字段应重置为空白
  • 城市字段不应标记为无效
• 用户应该可以随时完全重置表单

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

可能有使用mutators，react-final-form-listeners或decorators的方法，但是在我看来，这就像是一种常见的表单用例，对于这些表单，没有高级API的简单解决方案将是不错的选择。

---

这是一个包含FormSpy组件，useRef钩子和form.reset api的版本。

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

• 通过FormSpy onChange prop订阅以形成值
• 每次值更改时更新一个反应引用
• 将参考值与新值进行比较，并使用form.reset API重置城市字段值而无需触发验证

---

这是另一个通过react-final-form-listeners使用 Declarating Form Rules 方法的版本，就像建议的Erik一样。

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

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

---

两种解决方案几乎完美，不同之处在于form.reset方法在幕后重新定义了表单initialValues，因此RESET按钮不会将表单重置为原始表单initialValues不再。

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

Answer 1

也许Declarative Form Rules是您需要的？