使用表单验证程序对ReactJs中的选项卡进行表单验证

我已经经历了一些问答，这似乎与我的问题非常吻合。然而，这并不能解决我的问题

我使用的是，如果您在ValidatorForm中有多个输入，并且您尝试提交，它会显示错误，如果存在任何错误，则不允许表单提交

然后，我将输入分为两部分，并在验证表单中使用现在提交时，它只显示打开的选项卡上的错误，而不显示隐藏的选项卡上的错误。检查的一种方法是，如果某些表单数据是必需的，我可以检查提交时的状态，并执行类似于“不提交”和使用感叹号图标更新选项卡标签的操作。但是，这不会显示错误字段

但是，我正在寻找一种不需要对提交处理程序进行更多检查就可以简化的方法，而验证器可以像处理单页表单一样工作

---

这是你的参考资料。如果您有任何解决方案，请在代码中进行更改。

Ciao，从技术上讲，无法验证

选项卡

中未选中当前

选项卡

的

文本验证器

（因为该

选项卡

上的元素未加载到DOM）

但是

我们可以做点什么。基本上，每次

ValidatorForm

验证表单中的元素时，都会调用

submit（）

函数。所以，我们的想法是：每次更改选项卡时，我们都可以调用这个

submit（）

，以验证选项卡上的元素

因此，首先，为表单创建一个ref：

<ValidatorForm
   ref={(ref) => { this.form = ref; }}
  ...

到目前为止还不错。我试过了，但它不起作用：（更好，它起作用，但只有当你在同一个

选项卡上单击两次才能起作用。为什么？因为
选项卡有一个延迟加载。所以要删除这个延迟加载，我们必须删除
选项卡面板
返回函数上的条件
值===index
。然后我删除了，现在它起作用了：）

但我们可以做得更好。只要未单击“提交”按钮，就不应验证表单。因此，我们可以向状态添加一个额外的布尔值（默认值
false
），当用户单击提交按钮时，我们将该布尔值设置为true：

<Button
   onClick={() => {
      this.form.submit();
      this.setState({ submitted: true });
   }}
>
  Submit
</Button> 

因此，在未按下按钮之前，表单仍然不会被验证。如果用户单击按钮，表单将被验证，并且每当用户更改选项卡时，
TextValidator
s，如果包含无效值，将显示错误

您的代码沙盒已修改。
谢谢！为了更好地理解，这已经解释得很清楚了。然而，@Giovanni Esposito在谈论DOM时，如果我们不使用显示属性“隐藏”而使用“无”呢？我试过了，它成功了，但是选项卡中有forwardRefs的警告。已解决：Submit按钮应该调用form.Submit，而不是默认的Submit。因此，我没有对状态使用额外的布尔值。：）
<Button
   onClick={() => {
      this.form.submit();
      this.setState({ submitted: true });
   }}
>
  Submit
</Button> 

handleTabChange = (event, newValue) => {
    this.setState({ value: newValue });
    if (this.state.submitted) this.form.submit();
  };