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()添加到清理函数中。

您可以在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]);

如何使用useeffect react钩子删除组件卸载时的事件监听器mousedown？

1 个答案: