react自动触发表单提交_javascript-React-防止表单提交

javascript-React-防止表单提交

我一直在试验React。 在我的实验中，我使用的是Reactstrap框架。单击按钮时，我注意到HTML表单已提交。 有没有一种方法可以防止单击按钮时提交表单？

我在这里重新创建了我的问题。 我的表单非常基本，看起来像这样：

Buttons

primary 

我想念什么？

9个解决方案

62 votes

我认为首先要注意的是，如果没有JavaScript(纯HTML)，则单击或submits form too时会提交form元素。在javascript中，您可以通过使用事件处理程序并在按钮单击或表单提交上调用e.preventDefault()来防止这种情况。 e是传递到事件处理程序中的事件对象。 通过react，两个相关的事件处理程序可以通过onSubmit的形式使用，另一个通过onClick在按钮上使用。

示例：[http://jsbin.com/vowuley/edit?html,js,console,output]

eddywashere answered 2020-01-04T02:03:46Z

46 votes

真的不需要JS ...只需向按钮添加type属性即可，其属性值为button

primary 

默认情况下，按钮元素的类型为“提交”，这会使它们提交其封闭的表单元素(如果有)。 将type更改为“按钮”可以防止这种情况。

HaukurHaf answered 2020-01-04T02:04:10Z

18 votes

preventDefault是您要寻找的。 只是阻止按钮提交

码<