Setting onSubmit in React.js

Lucas du Toit picture Lucas du Toit · Feb 12, 2015 · Viewed 143.3k times · Source

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?

Answer

Henrik Andersson picture Henrik Andersson · Feb 12, 2015

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

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