Как сделать слушатель на enter React?

Question

[вовчек]

Есть приложение - чат, при нажатии на кнопку, запускается функция которая отправляет сообщение на сервер, нужно сделать слушатель который при нажатии на enter, также будет имитироваться клик на кнопку которая отправляет сообщение, как это сделать - незнаю. Пробовал варианты в гугле, не вышло.
Буду благодарен за помощь.

Answer 1

[Safort]

Не совсем понял в чём именно проблема.
Вы не понимаете как поставить обработчик на Enter? В целом это обычный слушатель на событие keypress, например с проверкой свойства key (event.key === "Enter").

Или не ясно как в этом обработчике дальше логику строить?

также будет имитироваться клик на кнопку которая отправляет сообщение

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

Comments

[вовчек]

Я знаю как сделать обычный обработчик на Enter. суть в том что я не понимаю как это сделать в функции,

img

Попытался вот так, не выходит

[Safort]

В примере на скрине вообще идёт работа с DOM напрямую. Тут сразу пара вариантов почему не работает:
1. Слушатель вешается на элемент которого ещё нет в DOM.
2. Слушается click, а не keyup/keypress/etc.

Вообще, тут некорректная работа с реактом, т.к. слушатели назначаются в ручную без реальной необходимости.

Вот пример как можно было бы сделать это:

import React from 'react';

export default function App() {
  const enterHandler = (event) => {
    if (event.key === 'Enter') {
      sendMessage();
    }
  }

  const sendMessage = () => {
    console.log('sending message');
  }

  return (
    <div className="App">
      <textarea onKeyUp={enterHandler}></textarea>
      <button onClick={sendMessage}>Send</button>
    </div>
  );
}

Answer 2

[Kentavr16]

Вот здесь состряпал пример слушателя нажатия на кнопку. Надеюсь поможет. В реакте принцип отлавливание нажатия абсолютно идентичен.