隐藏下一个按钮，直到在React Final Form Wizard中填充值

Question

我正在从React Final表单中查看向导表单示例。

我想调整向导，使其隐藏下一个按钮，直到当前步骤中的所有输入均具有值为止。有点困惑如何实现这一目标。

我在想的是应该可以检查当前哪个步骤处于活动状态，并以某种方式提取该步骤中存在的输入的状态。如果所有输入都有值，请显示按钮，否则将其隐藏。

这个想法是动态检查每个步骤中存在的输入（因为它们可能在开发过程中发生变化，因此更好地实际查找存在的输入，而不是对特定状态以及是否有值进行硬编码检查）。

完整的示例在这里： https://codesandbox.io/s/km2n35kq3v
（按钮的代码在第73行的Wizard.js中）

Answer 1

如何将所需的值（带有验证规则）设置为仅在表单有效时才显示按钮？

请参见Wizard.js，第64、73和74行。

这不是100％理想的，因为您的验证可能具有更复杂的规则，并且您将无法从失败的提交中获得将所有字段标记为touched的值，但这已经很接近了。