反应 - 防止表单提交 [英] React - Preventing Form Submission

问题描述

我一直在试验React。在我的经历中，我正在使用 Reactstrap框架。当我点击一个按钮时，我注意到HTML表单提交了。有没有办法在单击按钮时阻止表单提交？

I've been experimenting with React. In my experiement, I'm using the Reactstrap framework.When I click a button, I've noticed that the HTML form submits. Is there a way to prevent form submission when a button is clicked?

我已经重新创建了我的问题这里。我的表单很基本，看起来像这样：

I've recreated my issue here. My form is pretty basic and looks like this:

<Form>
  <h3>Buttons</h3> 
  <p>
    <Button color="primary" onClick={this.onTestClick}>primary</Button>&nbsp;
  </p>
</Form>

我缺少什么？

推荐答案

我认为首先值得注意的是，如果没有javascript（普通html），单击时会提交表单元素<输入类型= 提交 值= 提交表单 > 或<按钮>提交形成太< /按钮> 。在javascript中，您可以通过使用事件处理程序并在按钮单击或表单提交时调用 e.preventDefault（）来防止这种情况。 e 是传递给事件处理程序的事件对象。使用react，两个相关的事件处理程序可以通过 onSubmit 形式获得，另一个通过 onClick 。

I think it's first worth noting that without javascript (plain html), the form element submits when clicking either the <input type="submit" value="submit form"> or <button>submits form too</button>. In javascript you can prevent that by using an event handler and calling e.preventDefault() on button click, or form submit. e is the event object passed into the event handler. With react, the two relevant event handlers are available via the form as onSubmit, and the other on the button via onClick.

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

这篇关于反应 - 防止表单提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！