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

IT技术 javascript forms reactjs
2021-04-30 07:27:00

我有两个react事件:

  1. 表单提交事件

    sendMessage: function(event){
        console.log(event);
        event.preventDefault();
    },
    
  2. 按键事件

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

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

2个回答

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

MDN 站点

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

根据HTML 规范

submit()方法在调用时必须formform元素本身提交submit()元素,并设置已提交的方法标志

其次是(第 4.10.22.3 节)

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

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

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

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