React验证表单，但提交时没有刷新。

Question

我在使用React的表单提交中遇到了一个问题，我需要。

1. 使用React;
2. 在提交前验证 "必填字段"。
3. 防止页面刷新。

我的DOM看起来像下面。

<div>
  <form onSubmit={handleSubmit}>
  <input id='1' type="text" required/>
  <input id='2' type="text" required/>
  <input id='3' type="text" required/>
  <input id='4' type="text" required/>
  <input id='5' type="text" required/>
  <input id='6' type="text" required/>
  ........
  <input id='n' type="text" required/>
  </form>
</div>

我得到的handleSubmit函数是这样的：

const handleSubmit = (e) => {
  //e.preventDefault    [HERE IS THE ISSUE]
  //something here
}

现在问题出现了。

如果我用 e.preventDefault()然后在提交时没有任何验证，用户可以留下一些字段空，然后直接提交；如果我评论 e.preventDefault()当点击提交时，页面就会刷新，这是错误的。

我想知道，是否有比e.preventDefault()更详细的方法，如e.preventRefrsh()来防止确切的步骤(刷新)，并保持那些正确的步骤(验证没有空)，因为他们是。

谢谢，问候，Anson

Answer 1

我之所以提出上面的问题，是因为我对React的表单验证工具并不熟悉，我之所以想使用自动验证功能，是因为只要是必填部分无效，就应该有一个小的弹框告诉用户这部分应该填写。

我只是找到了两个功能 reportvalidity 将验证该字段并给出弹出功能，并利用属性，如 required 和 minlength. 谢天谢地，我不用自己写验证功能，尤其是不用自己写弹窗（因为如果我写的话，风格必须和网站的其他表单完全一致）。

我还发现 checkvalidity但还没有做测试。如果我这样做，将更新。

谅谅