Совет React: используйте тег формы, если вы хотите что-то сделать, когда пользователь нажимает клавишу ввода.

В пользовательских интерфейсах вполне нормально, что что-то должно быть отправлено, когда пользователь нажимает ввод. В старые времена это обрабатывалось известным и печально известным тегом формы.

Хотя обычно мы не хотим, чтобы тег формы отправлял что-то на сервер непосредственно в React, мы все же можем использовать его для его ввода-поведения:

let myComponent = (props) => (
  <form onSubmit={handleSubmit}>
    <input />
  </form>
)
function handleSubmit(e) {
  e.preventDefault(); // Remmember to call preventDefault
  console.log("Enter pressed"); 
}

В качестве дополнительного преимущества ваши мобильные пользователи получат специальную кнопку отправки прямо на экранной клавиатуре (по крайней мере, на iOS).

Я думаю, что это намного проще, чем слушать события клавиш и проверять, является ли нажатая клавиша клавишей ввода.

Обновление: Томас Б. Хомбург (@homborg) любезно заметил, что если у вас есть более одного ввода в теге формы, вам нужно добавить кнопку, чтобы функция ввода работала. Это не специфично для React. Также обратите внимание, что тег кнопки по умолчанию меняется с типа button на тип submit внутри тега формы. Как правило, всегда полезно иметь видимую кнопку в качестве альтернативы нажатию ввода.