代码之家 › 专栏 › 技术社区 › peter flanagan

使用钩子检测单击外部反应组件

react-hooks ecmascript-6 typescript reactjs javascript

peter flanagan · 技术社区 · 6 年前

我发现我正在一个应用程序中重用行为,当用户在一个元素外单击时,我可以隐藏它。

引入钩子后,我是否可以将它放入钩子中,并在各个组件之间共享,以节省在每个组件中编写相同的逻辑?

我在一个组件中实现了它,如下所示。

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

1 回复 | 直到 6 年前

Paul Fitzgerald 6 年前

这是可能的。

可以创建一个名为 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') {
            setIsElementVisible(false);
        }
    };

    const handleClickOutside = (event: Event) => {
        if (ref.current && !ref.current.contains(event.target as Node)) {
            setIsElementVisible(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 };
}

然后,在组件中,您希望添加功能以执行以下操作:

const DropDown = () => {

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

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

}

找到一个 codesandbox 这里是例子。

推荐文章

Shibaji Biswas · 如何在Template literal的双引号内的html div id中编写JavaScript变量?

11 月前

GulgDev · 为什么不将属性设置为无效值?

11 月前

Koffee · 动画继续使用update()重新启动,而不是在Phaser 3中正常播放

1 年前

Monnt · 如何查看数组是否包括具有特定值的嵌套数组?

1 年前

JsCoder · 用ECDSA对C语言中的数据进行加密#

1 年前

dsi · 排序功能可实现多列的自定义差异

1 年前

huz3y · 如何在JavaScript中基于另一个变量值构建变量?如何重新分配它的值并对该变量执行方法?复制

1 年前

Darigan · clearTimeout将一个函数中的计时器与另一个函数(React.js)一起超时

1 年前

Joseph · 仅在React和JS中生成深色

1 年前

Joseph · 在Javascript中检索一些文本

1 年前