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

小编典典

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

reactjs

我有两个反应事件：

表单提交事件

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

keyPress事件

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

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

阅读 527

2020-07-22

共1个答案

小编典典

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

从MDN网站：

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

根据HTML规范：

submit()调用该方法时，必须form从form元素本身 提交submit()元素， 并使用
set方法标志set 。

其次是（第4.10.22.3节）

如果submit()未设置来自方法的提交标志，则submit在 form 处引发 一个简单的事件 ，该事件
会冒泡并且可以取消命名。

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

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

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

// ...

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

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

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

2020-07-22