react 监听 ref 不在dom范围内点击 事件

在React中，如果你想要监听ref元素之外的点击事件，通常不建议直接使用`ref`来实现，因为这可能会导致不必要的DOM操作。但可以通过创建自定义Hook（如`useRef`和`useState`的组合）来达到这个目的。以下是一个示例：

import { useRef, useEffect } from 'react';

function useOutsideClick(ref, onClickOutside) {
  const node = useRef(null);

  useEffect(() => {
    function handleClickOutside(event) {
      if (node.current && !node.current.contains(event.target)) {
        onClickOutside(event);
      }
    }

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

  return {
    ...ref,
    handle OutsideClick: handleClickOutside,
  };
}

// 使用示例
const MyComponent = ({ handleClickOutside }) => {
  const buttonRef = useRef(null);

  // 当点击文档区域以外时触发handleClickOutside
  const handleClickOutsideEvent = (event) => {
    console.log('Clicked outside the button!');
  };

  return (
    <div>
      <button ref={buttonRef} {...useOutsideClick(buttonRef, handleClickOutsideEvent)}>
        Click me!
      </button>
    </div>
  );
};

export default MyComponent;

在这个例子中，`useOutsideClick` Hook会添加一个`mousedown`事件处理器，只有当点击不在传入ref的元素及其子元素内时，才会执行回调函数`onClickOutside`。