蠱毒傳說
2022-12-29 14:12:34
我想使用下面的 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 在卸載時刪除事件偵聽器。我該怎么做 。有人可以幫我解決這個問題嗎?謝謝。
1 回答

largeQ
TA貢獻2039條經(jīng)驗 獲得超8個贊
您removeEventListener()在清理功能中添加。
您可以在文檔中找到相關(guān)信息。
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]);
添加回答
舉報
0/150
提交
取消