如何解决如何使用useeffect react钩子删除组件卸载时的事件监听器mousedown?
我想使用react usehook删除组件卸载时的eventlistener mousedown 下面是我的代码,function Dialog ({setIsDialogOpen,items}: Props) {
const dialogRef = React.useRef<HTMLDivElement>(null);
React.useEffect(() => {
const handleClickOutsideDialog = (event: any) => {
if (
dialogRef &&
!dialogRef.contains(event.target)//error here
) {
alert('You clicked outside of me!');
setIsDialogOpen(false);
}
};
document.addEventListener('mousedown',handleClickOutsideDialog);
},[setIsDialogOpen]);
return (
<Wrapper ref={dialogRef}>
<Container_one>
<span>title</span>
<Description> some big description</Description>
</Container_one>
<Container_two>
{items.map(item => (
<div
key={item.id}
/>
))}
</Container_two>
</Wrapper>
);
这很好。但是我想使用usehook删除卸载时的事件监听器。我该怎么做 。有人可以帮我吗谢谢。
解决方法
您将removeEventListener()
添加到清理函数中。
您可以在documentation中找到信息。
React.useEffect(() => {
const handleClickOutsideDialog = (event: any) => {
if (
dialogRef &&
!dialogRef.contains(event.target)//error here
) {
alert('You clicked outside of me!');
setIsDialogOpen(false);
}
};
document.addEventListener('mousedown',handleClickOutsideDialog);
return () => {
document.removeEventListener('mousedown',handleClickOutsideDialog);
}
},[setIsDialogOpen]);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。