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

Question

我正在查看来自 React Final 表单的向导表单示例。

我想调整向导，使其隐藏下一步按钮，直到当前步骤中的输入都具有值。有点难过如何实现这一目标。

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

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

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

Answer 1

如何制作所需的值（使用验证规则）并仅在表单有效时显示按钮？

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

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