Setting onSubmit in React.js

Question

On submission of a form, I'm trying to doSomething() instead of the default post behaviour.

Apparently in React, onSubmit is a supported event for forms. However, when I try the following code:

var OnSubmitTest = React.createClass({
    render: function() {
        doSomething = function(){
           alert('it works!');
        }

        return <form onSubmit={doSomething}>
        <button>Click me</button>
        </form>;
    }
});

The method doSomething() is run, but thereafter, the default post behaviour is still carried out.

You can test this in my jsfiddle.

My question: How do I prevent the default post behaviour?

score 138 · Accepted Answer · edited Mar 07 '16 at 14:11

138

In your doSomething() function, pass in the event e and use e.preventDefault().

doSomething = function (e) {
    alert('it works!');
    e.preventDefault();
}

edited Mar 07 '16 at 14:11

rjohnston

7,153
8
30
37

answered Feb 12 '15 at 14:03

Henrik Andersson

45,354
16
98
92

20

As of v0.13, returning false from event handlers will be ignored, so you'll have to use e.preventDefault() or e.stopPropagation() – joshuaegclark Feb 13 '15 at 19:14
I think you mean the former – Shark Lasers Apr 07 '20 at 20:08
@SharkLasers That comment was made on a edit of this post that is no longer available. – Henrik Andersson Apr 08 '20 at 08:36
2

Fair enough, you should probably delete comments when they are no longer relevant though. – Shark Lasers Apr 08 '20 at 10:12

score 54 · Answer 2 · answered Feb 12 '15 at 15:04

54

I'd also suggest moving the event handler outside render.

var OnSubmitTest = React.createClass({

  submit: function(e){
    e.preventDefault();
    alert('it works!');
  }

  render: function() {
    return (
      <form onSubmit={this.submit}>
        <button>Click me</button>
      </form>
    );
  }
});

answered Feb 12 '15 at 15:04

Adam Stone

1,986
13
16

1

This is proper way of using form in component :) – holms Jan 06 '17 at 01:22

score 26 · Answer 3 · answered Jun 01 '17 at 09:55

26

<form onSubmit={(e) => {this.doSomething(); e.preventDefault();}}></form>

it work fine for me

answered Jun 01 '17 at 09:55

Truong

661
1
7
6

Bolza · Answer 4 · 2015-09-02T15:18:39.250

6

You can pass the event as argument to the function and then prevent the default behaviour.

var OnSubmitTest = React.createClass({
        render: function() {
        doSomething = function(event){
           event.preventDefault();
           alert('it works!');
        }

        return <form onSubmit={this.doSomething}>
        <button>Click me</button>
        </form>;
    }
});

edited Sep 02 '15 at 15:18

answered Feb 12 '15 at 14:04

Bolza

1,904
2
17
42

2

In my case, it works with and without `this`: `{this.doSomething}` or `{doSomething}` is fine because `doSomething` is withing the `render()`. – starikovs Feb 05 '16 at 14:52

Setting onSubmit in React.js

4 Answers4

Linked