如何使用useeffect react hook在组件卸载时删除事件监听器mousedown？

Question

我想使用 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 在卸载时删除事件侦听器。 我该怎么做。 有人可以帮我解决这个问题。 谢谢。

Answer 1

在清理函数中添加removeEventListener() 。

您可以在文档中找到相关信息。

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]);