React.js: submit form programmatically does not trigger onSubmit event

Question

I want to submit a React form after a click on a link.

To do so I need to submit the form programmatically if the link is clicked.

my problem is : onSubmit handler is not being fired after the form submit .

Here is a code snipped that I made for this purpose:

var MyForm = React.createClass({   handleSubmit: function(e){     console.log('Form submited');      e.preventDefault();   },   submitForm : function(e){     this.refs.formToSubmit.submit();   },   render: function() {     return (     <form ref="formToSubmit" onSubmit={this.handleSubmit}>     <input name='myInput'/>     <a onClick={this.submitForm}>Validate</a>     </form>);   } });  ReactDOM.render(   <MyForm name="World" />,   document.getElementById('container') ); 

The handleSubmit is not invoked and the default behavior is executed (the form being submitted). Is this a ReactJs bug or a normal behavior? Is there a way to get the onSubmit handler invoked ?

Answer 1

I have success with this. This triggers the handleSubmit upon clicking. Hope this helps.

<form   onSubmit={this.handleSubmit}   ref={ (ref) => { this.form = ref; } } >     <a onClick={ () => { this.form.dispatchEvent(new Event('submit')) } }>         Validate     </a> </form> 

Found from here: https://github.com/facebook/react/issues/6796