如何解决如何使用TypeScript将参数传递给addEventListener侦听器函数?
情况有点像:
const searchKeyPressHandler = (appDispatch: any,e: any) => {
if (e.keyCode === 27) {
appDispatch({ type: "closeSearch" })
}
}
document.addEventListener("keyup",searchKeyPressHandler); // <-- error on searchKeyPressHandler
return () => document.removeEventListener("keyup",searchKeyPressHandler); // <-- error on searchKeyPressHandler
searchKeyPressHandler
使用打字稿返回错误,我不知道该如何避免。
document.addEventListener("keyup",function (e) { searchKeyPressHandler(appDispatch,e) });
可能是addEventListener
,但它对removeEventListener
无效,因为该事件将永远不会被删除
return () => document.removeEventListener("keyup",e) });
。
解决方法
只需将实际事件处理程序包装在匿名函数中,然后该函数可以使用其参数调用函数。但是请不要忘记,事件处理程序会自动传递对触发它们的事件的引用,因此请在外部处理程序中捕获该引用,并将其与您的其他参数一起传递:
document.addEventListener("keyup",function(event){ searchKeyPressHandler(event,x,y,z); });
或者,如果您需要多次使用被设置为“包装器”的功能(在以后必须删除监听器的情况下),则只需使用名称声明该功能并传递将该名称添加到.addEventListner()
中,如下所示:
function handler(event){
searchKeyPressHandler(event,z);
}
document.addEventListener("keyup",handler);
// And later...
document.removeEventListener("keyup",handler);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。