如何在 ReactJS 中实现切换功能，单击某个功能会显示一个菜单，而单击菜单外部则会隐藏它？

Question

当我单击按钮时，菜单将出现，第二次单击或单击菜单外部将隐藏。我怎样才能使用react.Js、useRef()来做到这一点？

我尝试过，结果表明，当我单击菜单部分或按钮时，菜单会出现，但当我单击外部时，它不会取消隐藏。不取消隐藏我必须单击该特定按钮或其他东西。我希望当我单击该按钮时它会显示，当我单击该按钮中的另一个按钮或单击网页中的任意位置时它会隐藏。

Answer 1

要进行切换，首先使用

useRef

钩子创建对下拉 div 的引用。之后，使用

useEffect

挂钩为下拉列表外部的点击添加事件侦听器。单击下拉列表外部时，它使用

contains

方法检查单击的元素是否位于下拉列表内部。如果没有，它会关闭下拉菜单。

单击按钮时，

handleToggle

会切换下拉列表的可见性。

这是实现：

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

function App() {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef(null);

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

    // Add event listener to handle clicks outside the dropdown
    document.addEventListener("mousedown", handleClickOutside);

    // Clean up the event listener on component unmount
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);

  const handleToggle = () => {
    setIsOpen((prev) => !prev);
  };

  return (
    <div ref={dropdownRef} className="dropdown">
      <button onClick={handleToggle}>Toggle Dropdown</button>
      {isOpen && (
        <div className="dropdown-content">
          {/* Dropdown content goes here */}
          <p>Dropdown content goes here</p>
        </div>
      )}
    </div>
  );
}

export default App;