如何使单击某些元素成为 useClickAway 挂钩的例外

Question

我有一个通过单击图标按钮打开的叠加层。在该叠加层中，我使用

useClickAway

库导出的

react-use

钩子 -

useClickAway(overlayRef, hideOverlay);

基本上，每当用户单击覆盖 dom 节点之外的任何位置时，它都会隐藏此覆盖。

但是这样，当用户单击

icon button

（打开此覆盖层）时，我遇到一个问题，此覆盖层首先关闭然后重新打开，这会导致覆盖层闪烁。

我怎样才能使点击这个

icon button

成为这个

useClickAway

钩子的例外？

我尝试添加

event.stopPropagation

来单击

icon button

上的事件处理程序，但没有成功。

Codesandbox 链接相同 - https://codesandbox.io/s/useclickaway-hook-krd6y6

Answer 1

听起来您想阻止覆盖层在单击图标按钮时立即关闭并重新打开，同时仍然允许在单击覆盖层外部时关闭覆盖层。由于在覆盖层外部单击时

useClickAway

挂钩会触发

hideOverlay

函数，因此您需要一种机制来在单击图标按钮时暂时禁用此行为。

实现此目的的一种方法是使用标志来根据上次单击事件目标确定是否应关闭叠加层。以下是如何修改代码以实现此目的的示例：

import React, { useState, useRef } from 'react';
import { useClickAway } from 'react-use';

const Overlay = () => {
  const overlayRef = useRef(null);
  const [isOpen, setIsOpen] = useState(false);
  const [shouldClose, setShouldClose] = useState(true); // Add a flag

  const toggleOverlay = () => {
    setIsOpen(!isOpen);
  };

  const hideOverlay = () => {
    if (shouldClose) {
      setIsOpen(false);
    } else {
      setShouldClose(true);
    }
  };

  useClickAway(overlayRef, hideOverlay);

  return (
    <div>
      <button onClick={toggleOverlay}>Toggle Overlay</button>
      {isOpen && (
        <div ref={overlayRef}>
          {/* Overlay content */}
          <button
            onClick={(e) => {
              setShouldClose(false); // Prevent closing
              e.stopPropagation();
            }}
          >
            Icon Button
          </button>
          {/* Other overlay content */}
        </div>
      )}
    </div>
  );
};

export default Overlay;

在此示例中，

shouldClose

标志用于确定当

useClickAway

钩子触发

hideOverlay

函数时是否应关闭覆盖层。单击图标按钮时，

shouldClose

标志会暂时设置为

false

，从而防止叠加层立即关闭。

e.stopPropagation()

调用可防止事件传播并影响覆盖层的关闭行为。

请记住，上面的示例假设了基本的覆盖结构。您可能需要对其进行调整以适应您的特定代码和样式。