React (Next.js) hook useOutsideClick 取消了我的链接

Question

我正在使用以下挂钩来处理 show/hide 下拉菜单的“点击离开”功能：

const useOutsideClick = (ref: NonNullable<RefObject<HTMLButtonElement>>) => {
  const [outsideClick, setOutsideClick] = useState<boolean | null>(null)

  useEffect(() => {
    const handleClickOutside = (e: React.MouseEvent | Event) => {
      if (
        ref &&
        !(ref?.current as unknown as RequiredCurrentRef).contains(
          e?.target as Node
        )
      ) {
        setOutsideClick(true)
      } else {
        setOutsideClick(false)
      }

      setOutsideClick(null)
    }

    document.addEventListener('mousedown', handleClickOutside)

    return () => {
      document.removeEventListener('mousedown', handleClickOutside)
    }
  }, [ref])

  return outsideClick
}
export default useOutsideClick

钩子工作正常但是一旦我点击 <a href> 链接（与下拉列表分开的组件）它不会重定向，所以链接不起作用我该如何解决？

编辑我正在使用 bulma.css 下拉菜单

Answer 1

我认为您根本不需要创建额外的挂钩。

如果您想在用户点击或离开元素时执行某些操作，您可以使用 onBlur and onFocus 回调。

如果您出于其他原因（例如单击按钮）想要对其进行模糊处理，您可以使用 reference of the anchor 并随时调用 blur() 方法。

React (Next.js) hook useOutsideClick 取消了我的链接

React (Next.js) hook useOutsideClick cancels my links

reactjs

next.js

bulma

react-hooks