javascript ReactJS：如何从另一个事件触发表单提交事件

ReactJS: how to trigger form submit event from another event

提问by Dheerendra

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

1. 表单提交事件

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

2. 按键事件

   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 sendMessagefrom textareaKeypresswith proper event?

但是 reactJS 没有捕获由textareaKeypress. 如何通过适当的事件调用sendMessagefrom textareaKeypress？

回答by Michelle Tilley

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

我今天学到了一些新东西：这就是 DOM 的工作原理。

From the MDN site:

从MDN 站点：

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.

onsubmit="return false;"从基于 Gecko 的应用程序调用此方法时，不会触发表单的 onsubmit 事件处理程序（例如，）。通常，不保证 HTML 用户代理会调用它。

According to the HTML spec:

根据HTML 规范：

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

该submit()方法在调用时必须form从form元素本身提交submit()元素，并设置已提交的方法标志。

followed by (section 4.10.22.3)

其次是（第 4.10.22.3 节）

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

如果submit()未设置submit from方法标志，则submit在form触发一个简单的冒泡且可取消的事件，名为。

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

因此，如果submit()设置了方法标志，则不会触发该事件。

---

---

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

我能够通过以下代码（JSFiddle 示例）获得您（和我）期望的行为：

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

// ...

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

(You'll need more verbose codein IE.)

（您将需要在 IE 中使用更详细的代码。）

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

jQuery 的$(form).submit()委托给$(form).trigger("submit")，所以我希望这是一个类似的解决方法。

回答by Brigand

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