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

我正在尝试实现一个表单，其中包含两个连续的依赖选择，分别是反应最终表单和材质ui

要求

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

我努力用react final formAPI找到一个简单而优雅的解决方案来满足这些需求

可能有使用或的方法，但在我看来，这似乎是一个常见的表单用例，没有高级API的简单解决方案就很好了

---

这是一个结合了

FormSpy

组件、

useRef

钩子和

form.reset

api的版本

• 通过FormSpy

  onChange

  prop订阅表单值
• 每次值更改时更新react ref
• 将参考值与新值进行比较，并使用

  form.reset

  API在不触发验证的情况下重置城市字段值

---

下面是另一个版本，它使用方法，通过

react final form listeners

，就像Erik建议的那样

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

---

两种解决方案几乎都能完美地工作，除了

form.reset

方法在引擎盖下重新定义表单

初始值

，因此重置按钮不再将表单重置为原始

初始值

---

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

也许是您需要的？

我会尝试一下，然后再回来找您。感谢您的及时回复ErikHere是一个带有react final form listeners的修改版：-我在项目中使用了此解决方案，但请注意它仍然有修改原始初始值的缺点。@Ricovitch它似乎没有加载正确的城市。@DimitriKopriwa不确定您的意思。示例的目的不是根据您选择的国家设置正确的城市，而是为了实现我最初描述的要求（主要重置城市字段），我有另一个用例。我想更新状态，以便表单组件之外的另一个组件知道某个特定值已更改。我尝试了formspy，但当我设置整个组件的状态时，它会重新渲染