Question

我有两个反应事件：

表单提交事件

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

keyPress事件

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

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

Answer 1

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

来自the MDN site：

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

根据the HTML spec：

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

其次（第4.10.22.3节）

如果未设置从submit()方法标记提交的内容，则以格式submit的气泡并可取消的简单事件 >

因此，如果设置了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：如何从另一个事件触发表单提交事件

2 个答案: