Не удалось отправить событие KeyDown в React Component

Question

Я хотел бы отправлять события onKeyDown из элемента body, также являющегося элементом div внутри тела.

Я использую React и попытался добавить прослушиватель события onKeyDown к моему тегу body в функции componentDidMount моегоReact component.

componentDidMount() {
    document.getElementById("main-content").onkeydown = event => {
        document.getElementById("Keyboard").dispatchEvent(event);
    }
}

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

InvalidStateError: Была предпринята попытка использовать объектэто не, или больше не может быть использовано.

Любая помощь будет оценена!

Answer 1

Разве вы не можете жестко закодировать его в элемент div?
Используйте этот вопрос в качестве справки, если можете.

Если вы не можете записать его, возможно, попробуйте это:

    document.querySelector('#yourDiv').addEventListener('keydown', function (event) {
      console.log(event.key) //Change this to whatever you want it to do
    })

Затем в своем HTML укажите свой div tabindex="0" свойство.

Свойство tabindex:

tabindex = "0" позволяет расположить элемент не-формы / ссылки / объекта в порядке навигации по умолчанию, позволяя любому элементу быть фокусируемым и инициировать взаимодействие.

Подробнее здесь