Zach Templeton Zach Templeton - 1 year ago 99
React JSX Question

React - Preventing Form Submission

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:

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

What am I missing?

Answer Source

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.