反应验证表单，但提交时没有刷新

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() 来阻止确切的步骤（刷新），并保持那些正确的步骤（验证不为空）为他们是。

感谢和亲切的问候， 安森

Answer 1

我问上面的问题是因为我不熟悉 React 的表单验证工具，而我想使用自动验证功能的原因是因为每当需要的部分无效时，应该有一个小弹出-向上框告诉用户这部分应该被填写。

我只找到了两个函数reportvalidity，它们将验证字段并提供弹出功能，并利用required 和minlength 等属性。感谢上帝，我不必编写自己的验证函数，尤其是不必编写自己的弹出窗口（因为样式必须与网站上的其他表单完全一致，如果我这样做的话）。

我也找到了checkvalidity，但尚未对此进行测试。如果我这样做会更新。

谢谢