React Synthetic Event: How to capture if Enter key is pressed?

Question

Why does the event passed below retain 'event.target' value but not 'event.code'?

import React, { useState, useEffect } from 'react';
import moment from 'moment';
import { subscribeToTimer } from './api';
import './App.css';

function App() {
  function getInput(e) {
    console.log(e.target);
    console.log(e.code);
  }

  return (
    <>
      <p>Hello World!</p>
      <input type="text" name="message" className="message" placeholder="Type here..." onKeyUp={(e) => getInput(e)} />
    </>
  );
}

export default App;

How do we capture the 'Enter' key pressed for the input element in React?!

Did you try searching stack overflow for similar questions before you posted this? I'm fairly sure this has been asked and answered before. — Josh Pittman, Feb 07 '20 at 15:48
Does this answer your question? [to call onChange event after pressing Enter key](https://stackoverflow.com/questions/31272207/to-call-onchange-event-after-pressing-enter-key) — Brian Thompson, Feb 07 '20 at 15:54
Please read [official documentation](https://reactjs.org/docs/events.html) — Gennady Dogaev, Feb 07 '20 at 15:56
Keyboard events are described [here](https://reactjs.org/docs/events.html#keyboard-events) — Gennady Dogaev, Feb 07 '20 at 16:02
Yes indeed, but i didn't get the above in my search result. Now I'm thinking about the differences between e.code and e.key. Thank you for your feedback! — Amith Raravi, Feb 07 '20 at 16:13

score 3 · Accepted Answer · answered Feb 07 '20 at 16:08

3

There is no code key to the event.

You can use event.key === 'Enter' or event.keyCode === 13 check if the key pressed is Enter.

answered Feb 07 '20 at 16:08

Frederic Mamath

91
1
5

DOM onkeyup event does have 'code' associated with it! 'event.code' does log 'Enter' when the Enter key is pressed. – Amith Raravi Feb 07 '20 at 16:20
But React Synthetic Event doesn't, hence my confusion :) – Amith Raravi Feb 07 '20 at 16:23

React Synthetic Event: How to capture if Enter key is pressed?

1 Answers1