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

Question

我有两个反应事件：

表单提交事件

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

按键事件

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

但是 reactJS 没有捕获由 textareaKeypress 触发的表单提交。如何通过适当的事件从 textareaKeypress 调用 sendMessage？

Answer 1

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

来自 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.

根据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.

随后是（第 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.

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

我能够通过以下代码 (JSFiddle example) 获得您（和我）所期望的行为：

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

// ...

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

（在 IE 中需要 more verbose code。）

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

Answer 2

这是您的组件，因此您无需担心传递实际事件。您有一些事件处理程序，然后您有实际操作。

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

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

ReactJS: how to trigger form submit event from another event

javascript

forms

reactjs