Обработчик события на клавишу Enter в React?

Question

[JastaFly]

Доброго всем времени суток! Нужно было повесить обработчик события на нажатие клавиши Enter. Походу дела я столкнулся с проблемой: элемент на который я вешал обработчик события на момент создания ещё не существовует. По итого всё было сделано через setTimeout:

function Typing_message() {
    let messageField = React.createRef();
    setTimeout(function () {
        messageField.current.addEventListener('keydown', function (keyPress) {
            if (keyPress.keyCode == 13) {
                console.log('Enter press');
            }
        })
    }, 1000);
    return (
        <div className={style.typing}>
            <div className={style.typing__icon}>
               
            </div>
            <textarea ref={messageField} placeholder="Type your message..." name="" className={style.typing__field}></textarea>
            <div className={style.typing__icon}>
               
            </div>
            <div className={style.typing__icon}>
    
            </div>
        </div>
    );
}

Но это какая-то игра хреном по балалайке. Есть ли како-то более изящное решение?!??

Comments

[0xD34F]

Есть ли како-то более изящное решение?!??

Есть.

И если бы вы имели привычку читать документацию, то знали бы о нём.

[JastaFly]

0xD34F, а Вы бы смогли дать более толковый ответ чем первая ссылка из гугла если бы имели привычку читать вопрос прежде чем умничать. По ссылке сплошные onClickи, а у меня чуть более интересное событие

[0xD34F]

JastaFly, ничего "более интересного" у вас нет, всё тривиально. А если недостаточно документации - значит рано вам за react браться.

[JastaFly]

Нечего интересного нет в Вашем ответе. А нужная страница документации находится здесь. Упс! Но ведь Яндекс Вам выдал другую..... нелегко нынче быть ламером.... даже на поисковик нельзя положиться

Answer 1

[Александр Черемхин]

Зачем Вы сами себе усложняете жизнь ? Вот типовое решение

const onKeyDown = e =>{
// обработайте нажатие клавиши. 
}
return (
    <textarea onKeyDown={onKeyDown} .../>
)

Comments

[JastaFly]

Об этой фиче я не знал... спасибо)

[Александр Антонов]

JastaFly, о какое фиче, это базовые вещи в реакте