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

【问题标题】：ReactJS: how to trigger form submit event from another eventReactJS：如何从另一个事件触发表单提交事件
【发布时间】：2015-05-08 10:01:10
【问题描述】：

我有两个反应事件：

表单提交事件

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？

【问题讨论】：

我的问题不是关于为什么这段代码不起作用，而是关于如何实现可以被 reactjs 事件捕获的表单提交触发器。
我认为您误解了我的评论。我只是在谈论您的问题的格式，而不是您的代码/问题。您在问题中使用了“stack sn-ps”，它允许我们通过添加大的“运行代码 sn-p”按钮（参见 stackoverflow.com/revisions/28904875/1）直接在 Stack Overflow 上运行代码。但是，如果您的代码示例不能单独执行，则无需使用它们。这些按钮只会让你的问题变得混乱。
即尝试使用代码示例（消息编辑器中的大括号）而不是代码片段（带有括号图标的页面）。
@FelixKling 哦，对不起，完全误解了这一点。谢谢。下次我会记住的

标签： javascript forms reactjs

【解决方案1】：

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

来自the MDN site：

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

根据the HTML spec：

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

随后是（第 4.10.22.3 节）

如果从 submit() 提交的方法标志未设置，则在 form 处触发一个简单的事件，该事件会冒泡并可取消，名为 submit。 p>

因此，如果设置了 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")，所以我希望这是一个类似的解决方法。

【讨论】：

只是想对您的回答表示感谢。很难找到它（试图通过单击复选框时自动提交表单来做类似的事情），但这解决了我的问题。
使用this.refs.form.submit(); 代替this.refs.form.getDOMNode().dispatchEvent(new Event("submit"));
@frevib 正如问题和本答案中所述，submit() 不会触发 React 的 submit 事件，因此解决方法
如果以上方法对任何人都不起作用，那么试试这个 - ReactDOM.findDOMNode(this.form).dispatchEvent(new Event("submit"));并从 'react-dom' 导入 ReactDOM；

【解决方案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();
    }
}

【讨论】：

这是错误的答案。因为我正在使用一些第三方模块，并且存在内部 onSubmit 处理程序。如果我手动触发 form.submit() 这个处理程序将不会被触发。