Sylar Sylar - 3 months ago 4x
Javascript Question

Form submits on wrong button click in React

Strange, my entire component keeps submitting by clicking the incorrect button.

The layout:

B Component
is inside
Component A
A Component
has the form.
B Component
triggers the form submit and I dont know why.

In the return function of A Component:

<form action... method...>
<BComponent />
<button type="submit">Submit</button>

B Component:


_removeFile: function(num){
// issue if function is empty

_fileRender: function(){
var files = function(f, x) {
<div key={x}>
<div className="">
<button onClick={this._removeFile.bind(this, x)}>Remove</button>

render: function(){


So when I click the remove button, the form submits. Why? That button passes data to
. Regardless if that function's empty or not, it still submits.
does nothing. My knowledge at this stage is limited so excuse the silly mistake, if any.

Worst case is to put
Component A
's submit button into an


Any button will submit its parent form. This is what buttons do :)

If you need a button but want to prevent the default action you need to use event.preventDefault().

Since you prepopulate an argument to the function using .bind, the event object will be passed as the second argument:

 _removeFile: function(num, e){
     // do stuff with num

working demo: