CODEWITHSUNDEEP
javascriptformsform-submitreactjsonsubmit
Lucas
Lucas

Reputation: 1293

Setting onSubmit in React.js

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?

Upvotes: 118

Views: 239608

Answers (4)

Truong
Truong

Reputation: 681

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

it work fine for me

Upvotes: 26

Henrik Andersson
Henrik Andersson

Reputation: 47222

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

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

Upvotes: 141

Bolza
Bolza

Reputation: 1944

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>;
    }
});

Upvotes: 6

Adam Stone
Adam Stone

Reputation: 2006

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>
    );
  }
});

Upvotes: 56

Related Questions