Reactjs onClick阻止所需的验证。为什么？

我有以下代码：

function AddForm(props) {

const handleSubmit = (e) => {
  e.preventDefault();
    createService(uid, service)
}

return (

      <Form>
        <Form.Group controlId="serviceTitle">
          <Form.Label>Service Title</Form.Label>
          <Form.Control 
          name="serviceTitle"
          onChange={update}
          required
          />
        </Form.Group>
        <Button variant="primary" type="submit" onClick={handleSubmit}>
          Publish Service
        </Button>
      </Form>
);
}

函数AddForm（道具）{
常量handleSubmit=（e）=>{
e、 预防默认值（）；
createService（uid，服务）
}
返回(
服务名称
发布服务
);
}

---

出于某种原因，当我在按钮中包含

onClick={handleSubmit}

时，我的

required

字段验证不再有效。但是当我删除

onClick={handleSubmit}

时，所需的

工作正常。如何在保持所需验证的同时让其可处理提交？
您应该在表单标记中使用onSubmit而不是onClick

它有很多好处，比如

您可以使用“回车”键提交
您可以使用HTML5表单验证，如必需或诺瓦利达
在您的情况下，它将使您能够在输入中使用required属性，而不是onClick，您应该在表单标记中使用onSubmit

它有很多好处，比如

您可以使用“回车”键提交
您可以使用HTML5表单验证，如必需或诺瓦利达
在您的情况下，它将使您能够在输入中使用required属性
请添加有关您用于表单的库的详细信息请添加有关您用于表单的库的详细信息这正是我建议的副本中给出的建议。我刚刚阅读了您提到的帖子。赞成。。现在很多人都在使用按钮的onClick事件来提交表单。谢谢分享这篇文章。这正是我建议的副本中给出的建议。我刚刚读了你提到的文章。赞成。。现在很多人都在使用按钮的onClick事件来提交表单。谢谢分享这篇文章。