使用钩子检测React组件外部的点击 [英] Detect click outside React component using hooks

问题描述

我发现我正在整个应用程序中重用行为，当用户在某个元素之外单击时，我可以将其隐藏.

I am finding that I am reusing behaviour across an app that when a user clicks outside an element I can hide it.

通过引入钩子，我可以将其放在钩子中并在各个组件之间共享，以免我在每个组件中编写相同的逻辑吗?

With the introduction of hooks is this something I could put in a hook and share across components to save me writing the same logic in every component?

我已经在以下组件中实现了一次.

I have implemented it once in a component as follows.

const Dropdown = () => {
    const [isDropdownVisible, setIsDropdownVisible] = useState(false);   
    const wrapperRef = useRef<HTMLDivElement>(null);

    const handleHideDropdown = (event: KeyboardEvent) => {
        if (event.key === 'Escape') {
            setIsDropdownVisible(false);
        }
    };

    const handleClickOutside = (event: Event) => {
        if (
            wrapperRef.current &&
            !wrapperRef.current.contains(event.target as Node)
        ) {
            setIsDropdownVisible(false);
        }
    };

    useEffect(() => {
        document.addEventListener('keydown', handleHideDropdown, true);
        document.addEventListener('click', handleClickOutside, true);
        return () => {
            document.removeEventListener('keydown', handleHideDropdown, true);
            document.removeEventListener('click', handleClickOutside, true);
        };
    });

    return(
       <DropdownWrapper ref={wrapperRef}>
         <p>Dropdown</p>
       </DropdownWrapper>
    );
}

推荐答案

这是可能的.

您可以创建一个名为 useComponentVisible

import { useState, useEffect, useRef } from 'react';

export default function useComponentVisible(initialIsVisible) {
    const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);
    const ref = useRef<HTMLDivElement>(null);

    const handleHideDropdown = (event: KeyboardEvent) => {
        if (event.key === 'Escape') {
            setIsComponentVisible(false);
        }
    };

    const handleClickOutside = (event: Event) => {
        if (ref.current && !ref.current.contains(event.target as Node)) {
            setIsComponentVisible(false);
        }
    };

    useEffect(() => {
        document.addEventListener('keydown', handleHideDropdown, true);
        document.addEventListener('click', handleClickOutside, true);
        return () => {
            document.removeEventListener('keydown', handleHideDropdown, true);
            document.removeEventListener('click', handleClickOutside, true);
        };
    });

    return { ref, isComponentVisible, setIsComponentVisible };
}

然后在要添加功能的组件中执行以下操作:

Then in the component you wish to add the functionality to do the following:

const DropDown = () => {

    const { ref, isComponentVisible } = useComponentVisible(true);

    return (
       <div ref={ref}>
          {isComponentVisible && (<p>Going into Hiding</p>)}
       </div>
    );

}

在此处找到 codesandbox 示例.

这篇关于使用钩子检测React组件外部的点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！