单击外部下拉菜单并关闭下拉菜单做出反应

Question

我有一个演示应用程序，想在点击外部任意位置时关闭下拉菜单。

只是一个简单的代码。

这是我的 codesandbox

演示应用 link

Answer 1

    useEffect(() => {
    const checkIfClickedOutside = e => {   
      if (toggle && dropDownRef.current && !dropDownRef.current.contains(e.target)) {
        setToggle(false)
      }
    }
    document.addEventListener("mousedown", checkIfClickedOutside)

    return () => {
      document.removeEventListener("mousedown", checkIfClickedOutside)
    }
  }, [toggle])

单击外部下拉菜单并关闭下拉菜单做出反应

Click outside drop-down and close drop-down react

javascript

reactjs

mouseevent