在下拉菜单范围外单击时关闭下拉菜单最明智的方法是什么

Question

我在React中创建了这个简单的Dropdown，在我点击Dropdown范围之外之前，一切都很好。https://codesandbox.io/s/restless-fast-x2jhe8

我在正文上添加了一个min-height: 100vh属性，以复制一个完整大小的页面。就像我说的，当我们点击页面中任何不是下拉菜单的地方时，关闭下拉菜单的功能还没有实现。我不知道如何以最优雅的方式处理这件事。我尝试了在主体上添加一个带有useEffect的事件侦听器，然后检查event.target是否具有类dropdown，但它没有按预期执行。

Answer 1

我制作了一个公共钩子，在其中我传递显示或关闭modal的element和state的ref

import { useEffect } from 'react';
function useOutsideClickManager(ref: React.RefObject<HTMLInputElement>, setIsOpen: React.Dispatch<React.SetStateAction<boolean>>) {
useEffect(() => {
function handleClickOutside(event: { target: EventTarget | Node | null }) {
if (ref.current && !ref.current.contains(event.target as Node)) {
setIsOpen(false);
}
}
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [ref, setIsOpen]);
}
export { useOutsideClickManager };

const [isOpen, setIsOpen] = React.useState(false);
const wrapperRef = useRef<HTMLInputElement>(null);
useOutsideClickManager(wrapperRef, setIsOpen);