I've two react events:
Form submit event
sendMessage: function(event){
console.log(event);
event.preventDefault();
},
keyPress Event
textareaKeypress: function(event){
if (event.which == 13 && !event.shiftKey){
document.getElementById('messagebox').submit();
}
},
but the reactJS is not capturing the form submit triggered by textareaKeypress
. How can I call the sendMessage
from textareaKeypress
with proper event?
js import React, { Component } from "react"; class App extends Component { submitForm = () => { this. formRef. dispatchEvent( new Event("submit", { bubbles: true, cancelable: true }) ) }; render() { return ( <div className="app"> <form ref={ref => this. formRef = ref} onSubmit={e => { e.
To redirect on form submit using React Router: Use the useNavigate() hook, e.g. const navigate = useNavigate(); . Call the navigate() function passing it the path - navigate('/contacts') . The navigate() function lets us navigate programmatically.
The onsubmit event occurs when a form is submitted.
I learned something new today: this is just how the DOM works.
From 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.
According to the HTML spec:
The
submit()
method, when invoked, must submit theform
element from theform
element itself, with the submitted fromsubmit()
method flag set.
followed by (section 4.10.22.3)
If the submitted from
submit()
method flag is not set, then fire a simple event that bubbles and is cancelable namedsubmit
, at form.
So, the event is not fired if the submit()
method flag is set.
I was able to get the behavior you (and I) were expecting via the following code (JSFiddle example):
<form onSubmit={this.handleSubmit} ref="form">
<textarea onKeyPress={this.handleKeyPress} />
</form>
// ...
this.refs.form.getDOMNode().dispatchEvent(new Event("submit"));
(You'll need more verbose code in IE.)
jQuery's $(form).submit()
delegates to $(form).trigger("submit")
, so I expect it's a similar workaround.
It's your component, so you don't need to worry about passing actual events around. You have some event handlers, and then you have the actual action.
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();
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With