14

I've two react events:

  1. Form submit event

    sendMessage: function(event){
    console.log(event);
    event.preventDefault();
},

  2. keyPress Event

    textareaKeypress: function(event){
    if (event.which == 13 && !event.shiftKey){
        document.getElementById('messagebox').submit();
    }
},

but the reactJS is not capturing the form submit triggered by textareaKeypress. How can I call the sendMessage from textareaKeypress with proper event?

Felix Kling
  • 756,363
  • 169
  • 1,062
  • 1,111
Dheerendra
  • 1,358
  • 3
  • 17
  • 35
  • My question is not about why this code isn't working, the question is about how to implement form submit trigger which can be catched by reactjs events. – Dheerendra Mar 06 '15 at 18:22
  • 3
    I think you misunderstood my comment. I'm only talking about the formatting of your question, not your code/problem. You used "stack snippets" in your question, which allow us to directly run code on Stack Overflow, by adding big "run code snippet" buttons (see http://stackoverflow.com/revisions/28904875/1). But if your code examples are not excutable on their own, there is no need to use them. It will just clutter your question with those buttons. – Felix Kling Mar 06 '15 at 18:23
  • i.e. Try using a Code Sample (curly braces in message editor) instead of Code Snippets (page with brackets icon). – Sean O Mar 06 '15 at 18:25
  • 1
    @FelixKling ohh, sorry, totally misunderstood that. SeanO Thanks. I'll keep remember that from next time – Dheerendra Mar 06 '15 at 18:27

2 Answers2

30

I learned something new today: this is just how the DOM works.

From the MDN site:

The form's onsubmit event handler (for example, onsubmit="return false;") will not be triggered when invoking this method from Gecko-based applications. In general, it is not guaranteed to be invoked by HTML user agents.

According to the HTML spec:

The submit() method, when invoked, must submit the form element from the form element itself, with the submitted from submit() method flag set.

followed by (section 4.10.22.3)

If the submitted from submit() method flag is not set, then fire a simple event that bubbles and is cancelable named submit, at form.

So, the event is not fired if the submit() method flag is set.

I was able to get the behavior you (and I) were expecting via the following code (JSFiddle example):

<form onSubmit={this.handleSubmit} ref="form">
  <textarea onKeyPress={this.handleKeyPress} />
</form>

// ...

this.refs.form.getDOMNode().dispatchEvent(new Event("submit"));

(You'll need more verbose code in IE.)

jQuery's $(form).submit() delegates to $(form).trigger("submit"), so I expect it's a similar workaround.

Michelle Tilley
  • 154,130
  • 39
  • 369
  • 310
  • 1
    Just wanted to say thanks for your answer. Had a hard time finding it (was trying to do something similar with auto-submitting a form when a checkbox was clicked), but this solved my problem. – sidoh Sep 20 '15 at 02:51
  • 4
    Use `this.refs.form.submit();` instead of `this.refs.form.getDOMNode().dispatchEvent(new Event("submit"));` – frevib Dec 14 '16 at 13:48
  • 3
    @frevib As stated in both the question and this answer, `submit()` doesn't trigger **React**'s `submit` event, thus the workaround – Phu Ngo Jul 11 '17 at 16:11
  • If above does not work for anyone then try this - ReactDOM.findDOMNode(this.form).dispatchEvent(new Event("submit")); And import ReactDOM from 'react-dom'; – Niraj Feb 19 '19 at 10:55
4

It's your component, so you don't need to worry about passing actual events around. You have some event handlers, and then you have the actual action.

sendMessage: function(){
    console.log('message:', this.state.message);
},
handleFormSubmit: function(event){
    event.preventDefault();
    this.sendMessage();
},
handleTextareaKeypress: function(event){
    if (event.which == 13 && !event.shiftKey){
        this.sendMessage();
    }
}
Brigand
  • 80,366
  • 19
  • 159
  • 169
  • 1
    This is the wrong answer. Cause I'm working with some thirdparty module and there are exist inner onSubmit handler. If I trigger form.submit() manually this handler won't be triggered. – Velidan Apr 11 '18 at 13:55