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?
This question is related to
javascript
forms
form-submit
reactjs
onsubmit
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>;
}
});
<form onSubmit={(e) => {this.doSomething(); e.preventDefault();}}></form>
it work fine for me
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>
);
}
});
Source: Stackoverflow.com