在onKeyDown处理程序中输入onClick函数。

Question

有一个onClick函数的keyDown处理程序，已经作为一个道具传递给了组件。keydown是为了方便访问，所以onClick也可以用Enter和Space键来启动。因为onClick是鼠标事件，而keyDown是键盘事件，我不知道handleKeyDown中的onClick函数应该是什么类型。而且如果保持为任何类型，那么在一些边缘情况下不会刹车吗？

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**);
            }
        }

Answer 1

你可以把它作为MouseEvent和KeyboardEvent的联合类型，并在你的处理程序中使用类型保护来完善类型。这样，TypeScript将知道它传递给onClick的是什么类型。

但是，另一个需要考虑的问题，特别是对于可访问性，是为什么你有一个可点击的div？你可以用一个按钮来代替吗？按钮默认是可访问的，并且可以用鼠标和键盘工作。