проблема с функциональностью onKeyDown в приложении React

Question

Я новичок в React и создаю приложение-калькулятор с React-Redux, чтобы получить представление о структуре. Приложение работает с событием onClick, но есть некоторые проблемы. Я создал песочницу, чтобы ее могли увидеть все. https://stackblitz.com/edit/react-dezmon

При работе с приложением «Калькулятор» я столкнулся с двумя проблемами.

1. onKeyDown не работает. В основном мне нужны те же функции, что и в событии onClick (которое работает нормально).
2. После любой операции (после нажатия '='), когда я нажимаю на любой другой di git, предыдущее состояние не очищается. Например, если я добавляю 52 + 6, после нажатия =, когда я нажимаю на любой di git (например, 2), он выбирает 62. Он должен быть очищен в основном.

Любая помощь очень признателен.

Answer 1

Вы не можете использовать onKeyDown непосредственно на вашем <Digits>, потому что событие срабатывает только тогда, когда элемент в данный момент сфокусирован, и только 1 элемент может быть сфокусирован на странице за раз.

Что вам нужно do - это переместить ваш onKeyDown в родительский элемент и поместить этого слушателя в родительский элемент.

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

См. здесь: https://stackblitz.com/edit/react-pmmntj