Javascript 如何使用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>
);

函数对话框（{setIsDialogOpen，items}:Props）{
const dialogRef=React.useRef（null）；
React.useffect（（）=>{
const handleClickOutsideDialog=（事件：any）=>{
如果(
dialogRef&&
！dialogRef.contains（event.target）//此处出错
) {
警惕（“你在我之外点击了！”）；
setIsDialogOpen（假）；
}
};
document.addEventListener（'mousedown'，HandleClickOutside对话框）；
}，[setIsDialogOpen]）；
返回(
标题
一些大的描述
{items.map（item=>(
))}
);

---

这很好。但是我想在使用usehook卸载时删除事件侦听器。我该怎么做。有人可以帮我吗。谢谢。

您可以在清理功能中添加

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