reactjs - 隐藏下一个按钮，直到在 React 最终表单向导中填充了值

Question

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

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

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

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

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

标签： reactjsreact-final-form

Answer 1

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

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

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