Prevent form subscription in ReactJS input element

Question

I have an HTML form in my project, which is partially written with React (Don't ask me why. Historical issues.) Consider it to look like this:

<html>
<form>
<input type="text" name="name" />
<div id="app"><!-- React component here --></div>
</form>
</html>

Then the react code, effectively like this:

ReactDOM.render(
  <div>
    <input type="text" />
  </div>,
  app // consider this is the #app element
);

How can I stop the form from submitting with "enter" key by just changing the input element in my React component? Or is it possible?

I wouldn't expect it to submit on Enter anyway, there's more than one input field in the form. Normally, browsers only submit-on-enter in a text field if the text field is the only field in the form. — T.J. Crowder
– T.J. Crowder, Commented Apr 3, 2017 at 10:46
Working on a component that will dynamically generate text field (behave like textarea). Just want to prevent users from submitting the form by pressing "Enter" in my component. — Koala Yeung
– Koala Yeung, Commented Apr 3, 2017 at 10:47
From my experience, "Submit on Enter" works on any text field in the form (even if there are multiple text field). — Koala Yeung
– Koala Yeung, Commented Apr 3, 2017 at 10:48
Certainly not mine. For instance, this fiddle with just one input submits if you put your cursor in the field and press Enter, but this one with a secod input does not -- I just tested Chrome, Firefox, and IE11 (the browsers I have handy). — T.J. Crowder
– T.J. Crowder, Commented Apr 3, 2017 at 10:52
You're right. If your form do not have a submit button, the "Submit on Enter" will be de-activated for multi-field form. But my form do have a submit button. So it is practically this case. :-( — Koala Yeung
– Koala Yeung, Commented Apr 3, 2017 at 11:03

T.J. Crowder · Accepted Answer · 2017-04-03 10:41:00Z

2

Put an onKeydown handler on the input accepting the event parameter as e and, in the handler, if e.which is 13, call e.preventDefault to prevent the default action.

answered Apr 3, 2017 at 10:41

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Koala Yeung Over a year ago

It works! Thanks! Tried onKeyUp, onKeyPress and it didn't work. onKeyDown do the trick.

Collectives™ on Stack Overflow

Prevent form subscription in ReactJS input element

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related