Ввод функции onClick в обработчике onKeyDown - PullRequest
Новая
       39

Ввод функции onClick в обработчике onKeyDown

0 голосов
/ 30 апреля 2020

Для функции onClick есть обработчик keyDown, который был передан компоненту в качестве реквизита. Клавиша предназначена для обеспечения доступности, поэтому onClick можно запускать также с помощью клавиш Enter и Space. Поскольку onClick - это mouseEvent, а keyDown - keyboardEvent, я не уверен, каким должен быть тип функции onClick в handleKeyDown. И если он останется как любой, разве это не затормозит что-либо в некоторых крайних случаях? 

interface ComponentProps {
    onClick?: (**event: React.MouseEvent<HTMLDivElement>**) => void;
}

function handleKeyDown(**e: React.KeyboardEvent<HTMLDivElement>**) {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();

                onClick!(**e as any**);
            }
        }

1 Ответ

0 голосов
/ 30 апреля 2020

Вы можете ввести его как объединяющий тип как MouseEvent, так и KeyboardEvent, а внутри вашего обработчика использовать защиту типа для уточнения типа. Таким образом, TypeScript будет знать, какой тип он передает onClick.

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

...