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

Question

我有一个演示应用程序，想在点击外面的任何地方时关闭下拉菜单。

只是一个简单的代码。

这是我的codesandbox演示应用程序链接

点击这里

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])