在外部单击时，还有其他方法可以隐藏下拉菜单吗？

Question

因此，我在 React 中创建了一个下拉菜单，如果我在下拉菜单外单击，它应该会关闭。为此，我目前正在使用 click eventListeners。除了使用 eventListeners 之外，还有其他方法可以使用吗？我试过使用 onFocus 和 onBlur，但这似乎不起作用。

这是代码片段：

const [showMenu, setShowMenu] = useState(false);
const dropdownRef = useRef(null);

useEffect(() => {
    //hiding the dropdown if clicked outside
    const pageClickEvent = (e: { target: unknown }) => {
      if (dropdownRef.current !== null && !dropdownRef.current.contains(e.target)) {
        setShowMenu(!showMenu);
      }
    };

    //if the dropdown is active then listens for click
    if (showMenu) {
      document.addEventListener("click", pageClickEvent);
    }

    //unsetting the listener
    return () => {
      document.removeEventListener("click", pageClickEvent);
    };
}, [showMenu]);

<Button onClick = {() => setShowMenu(!showMenu)} />
{showMenu ? (
     <div className="dropdown-content" ref={dropdownRef} >
        <a>
        ...
        <a>
      </div>
    ) : null}

Answer 1

是的。在菜单下使用覆盖。

function MyComponent() {
  const [menuVisible, setMenuVisible] = useState(false);
  
  
  return (
    <div>
    
      <button className='dropdown-button' onClick={() => setMenuVisible(true)}>Click me</button>
      
      {menuVisible ? (
        <ul className='dropdown-menu'>
          {/* items go here */ }
        </ul>
      ) : null}
      
      {/* now the important part */}
      
      {menuVisible ? (<div className='overlay' onClick={() => setMenuVisible(false)} />) : null}
    
    </div>
  
  )
}

CSS

.overlay {
  position: fixed; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0; 
  background: rgba(0, 0, 0, 0.01);
}

在外部单击时，还有其他方法可以隐藏下拉菜单吗？

Is there any other way to hide dropdown menu when clicked outside?

reactjs

react-hooks