下拉菜单：“点击外面关闭”功能的最佳解决方案

2023-10-27 07:18:09

在React项目中，开发人员经常需要在界面中实现下拉菜单功能，并在下拉菜单之外的区域点击时将其关闭。为了解决这个问题，网上流传了许多不同的解决方案，例如在最外层 div 上添加事件监听器，使用stopPropagation() 方法来阻止事件的传播，或使用 CSS 和 JavaScript 来控制下拉菜单的显示和隐藏。然而，这些方法通常存在一些局限性或难以理解。在本文中，我们将介绍一种更为简单、直观和有效的解决方案。

解决方案

要实现“点击外面关闭”功能，我们只需在下拉菜单组件中使用React的useOnClickOutside() hook。此hook可以监听点击事件，并判断点击事件是否发生在下拉菜单组件之外。如果点击事件发生在下拉菜单组件之外，则将下拉菜单组件的状态设置为关闭。以下是使用useOnClickOutside() hook的示例代码：

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

const Dropdown = () => {
  const [isOpen, setIsOpen] = useState(false);
  const ref = useRef();

  const handleClickOutside = (event) => {
    if (ref.current && !ref.current.contains(event.target)) {
      setIsOpen(false);
    }
  };

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

  return (
    <div ref={ref}>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle Dropdown</button>
      {isOpen && (
        <div>
          Dropdown content
        </div>
      )}
    </div>
  );
};

export default Dropdown;