如何解决TypeScript-使用键盘导航下拉列表项
我正在开发一个开源项目,并且遇到了一个错误。我无法使用键盘(箭头键/标签)浏览下拉列表项。我已经编写了键盘导航逻辑,但是不确定如何实现它。下面是代码段。
.
.
.
const TopNavPopoverItem: FC<ComponentProps> = ({closePopover,description,iconSize,iconType,title,to}) => {
const history = useHistory();
const handleButtonClick = (): void => {
history.push(to);
closePopover();
};
const useKeyPress = function (targetKey: any) { // where/how am I supposed to use this function?
const [keyPressed,setKeyPressed] = useState(false);
function downHandler(key: any) {
if (key === targetKey) {
setKeyPressed(true);
}
}
const upHandler = (key: any) => {
if (key === targetKey) {
setKeyPressed(false);
}
};
React.useEffect(() => {
window.addEventListener('keydown',downHandler);
window.addEventListener('keyup',upHandler);
return () => {
window.removeEventListener('keydown',downHandler);
window.removeEventListener('keyup',upHandler);
};
});
return keyPressed;
};
return (
<button className="TopNavPopoverItem" onClick={handleButtonClick}>
<Icon className="TopNavPopoverItem__icon" icon={iconType} size={iconSize} />
<div className="TopNavPopoverItem__right">
<span className="TopNavPopoverItem__title">{title}</span>
<span className="TopNavPopoverItem__description">{description}</span>
</div>
</button>
);
};
有任何解决方法或解决方法? 预先感谢。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。