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

Question

我在使用 React 提交表单时遇到问题。 我需要：

1. 使用反应；
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>

我得到了我的句柄提交 function 如下

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

现在问题出现了：

如果我使用e.preventDefault() ，那么在提交时不会验证任何内容，他们用户可以将某些字段留空并提交； 如果我评论e.preventDefault() ，那么点击提交时页面会刷新，这是错误的。

我想知道，是否有比 e.preventDefault() 更详细的方法，例如 e.preventRefrsh() 来阻止确切的步骤（刷新），并保持这些正确的步骤（验证不为空）原样。

谢谢和亲切的问候，安森

Answer 1

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

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

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

谢谢