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?

Answer 1

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

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

Answer 2

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