1. 使用组件 react-cool-onclickoutside

react-cool-onclickoutside 是一个React 钩子  ，当用户在目标组件区域之外单击时触发回调。这是UI交互设计（IxD）的有用逻辑，例如关闭下拉菜单，模态或工具提示等。帮助大家❤️。

特征

• React监听基于React hook的外部点击  。
• Support‍♀️支持多个引用，以涵盖更多用例。
• ?使用  被动事件侦听  器改善滚动性能。
• ️滚动条可以从外部点击的回调中排除。
• the 在事件循环中忽略某些元素。
• ?使您可以在需要时停止监听外部喀哒声。
• for由于某些原因支持自定义引用  。
• ?支持  TypeScript  类型定义。
• Server️服务器端渲染友好。
• ?微小的大小（压缩后约为1.4KB）。除了反应之外，没有外部依赖性。

您还可以安装通过npm分发的此软件包  。

$ yarn add react-cool-onclickoutside
# or
$ npm install --save react-cool-onclickoutside

有关更多用法的详细信息，请查看项目的GitHub页面：https :  //github.com/wellyshen/react-cool-onclickoutside

快速入门（演示代码）

常见用例。

import React, { useState } from "react";
import useOnclickOutside from "react-cool-onclickoutside";

const Dropdown = () => {
  const [openMenu, setOpenMenu] = useState(false);
  const ref = useOnclickOutside(() => {
    setOpenMenu(false);
  });

  const handleClickBtn = () => {
    setOpenMenu(!openMenu);
  };

  return (
    <div>
      <button onClick={handleClickBtn}>Button</button>
      {openMenu && <div ref={ref}>Menu</div>}
    </div>
  );
};

import React, { useState } from "react";
import useOnclickOutside from "react-cool-onclickoutside";

const App = () => {
  const [showTips, setShowTips] = useState(true);
  const ref = useOnclickOutside(() => {
    setShowTips(false);
  });

  return (
    <div>
      {showTips && (
        <>
          <div ref={ref}>Tooltip 1</div>
          <div ref={ref}>Tooltip 2</div>
        </>
      )}
    </div>
  );
};

通过CSS类名忽略元素

您可以 通过ignore-onclickoutside  CSS类名称告诉  react-cool-onclickoutside在事件循环期间忽略某些元素  。如果要显式控制类名，请使用  ignoreClass  选项。

import React, { useState } from "react";
import useOnclickOutside from "react-cool-onclickoutside";

// Use default CSS class name
const App = () => {
  const ref = useOnclickOutside(() => {
    // Do something...
  });

  return (
    <div>
      <div ref={ref}>I'm a ?</div>
      <div>Click me will trigger the event's callback</div>
      <div className="ignore-onclickoutside">
        Click me won't trigger the event's callback
      </div>
    </div>
  );
};

// Use the CSS class name that you defined
const App = () => {
  const ref = useOnclickOutside(
    () => {
      // Do something...
    },
    { ignoreClass: "my-ignore-class" }
  );

  return (
    <div>
      <div ref={ref}>I'm a ?</div>
      <div>Click me will trigger the event's callback</div>
      <div className="my-ignore-class">
        Click me won't trigger the event's callback
      </div>
    </div>
  );
};

禁用事件监听器

如果出于性能原因要禁用事件侦听器或满足某些用例。我们 为您提供了  禁用选项。将其设置为  true后，将不会触发回调。

import React, { useState } from "react";
import useOnclickOutside from "react-cool-onclickoutside";

const App = () => {
  const [disabled, setDisabled] = useState(false);
  const ref = useOnclickOutside(
    () => {
      // Do something...
    },
    { disabled }
  );

  const handleBtnClick = () => {
    setDisabled(true);
  };

  return (
    <div>
      <button onClick={handleBtnClick}>
        Stop listening for outside clicks
      </button>
      <div ref={ref}>I'm a ?</div>
    </div>
  );
};

const useClickOutside = (ref, callback) => {
  const handleClick = e => {
    if (ref.current && !ref.current.contains(e.target)) {
      callback();
    }
  };
  React.useEffect(() => {
    document.addEventListener('click', handleClick);
    return () => {
      document.removeEventListener('click', handleClick);
    };
  });
};

const ClickBox = ({ onClickOutside }) => {
  const clickRef = React.useRef();
  useClickOutside(clickRef, onClickOutside);
  return (
    <div
      className="click-box"
      ref={clickRef}
      style={{
        border: '2px dashed orangered',
        height: 200,
        width: 400,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
      }}
    >
      <p>Click out of this element</p>
    </div>
  );
};

ReactDOM.render(
  <ClickBox onClickOutside={() => alert('click outside')} />,
  document.getElementById('root')
);

useVisible.js

import { useState, useRef, useEffect } from "react";
 
function useVisible(initialIsVisible) {
  const [isVisible, setIsVisible] = useState(initialIsVisible);
  const ref = useRef(null);
 
  const handleClickOutside = (event) => {
    if (ref.current && !ref.current.contains(event.target)) {
      setIsVisible(false);
    }
  };
 
  useEffect(() => {
    document.addEventListener('click', handleClickOutside, true);
    return () => {
      document.removeEventListener('click', handleClickOutside, true);
    };
  }, []);
 
  return { ref, isVisible, setIsVisible };
}
 
export default useVisible;

使用App.js文件中的以上钩子来管理单击时的显示/隐藏颜色选择器。

import React, { useState } from 'react';
import { SketchPicker } from 'react-color';
 
import useVisible from './useVisible';
 
function App() {
  const [colorHexCode, setColorHexCode] = useState('#000000');
  const { ref, isVisible, setIsVisible } = useVisible(false);
 
  return (
    <div className="App">
      <h3>React color picker - <a href="https://www.cluemediator.com">Clue Mediator</a></h3>
 
      <div>
        <b>Selected Hex Color: </b>
        <span className="color-box" style={{ background: colorHexCode }}></span>
        {colorHexCode}
      </div>
      <br />
 
      <input type="text" readOnly value={colorHexCode} onClick={e => setIsVisible(!isVisible)} />
      {isVisible && <div style={{ position: 'absolute' }} ref={ref}>
        <SketchPicker
          color={colorHexCode}
          onChange={e => setColorHexCode(e.hex)} />
      </div>}
    </div>
  );
}
 
export default App;

我们还将在框中显示选定的颜色以及实时取景的颜色代码。

输出量

运行项目并在浏览器中签出输出。

import { useState, useEffect, useRef } from 'react';

// Usage
function App() {
  // Create a ref that we add to the element for which we want to detect outside clicks
  const ref = useRef();
  // State for our modal
  const [isModalOpen, setModalOpen] = useState(false);
  // Call hook passing in the ref and a function to call on outside click
  useOnClickOutside(ref, () => setModalOpen(false));

  return (
    <div>
      {isModalOpen ? (
        <div ref={ref}>
          ? Hey, I'm a modal. Click anywhere outside of me to close.
        </div>
      ) : (
        <button onClick={() => setModalOpen(true)}>Open Modal</button>
      )}
    </div>
  );
}

// Hook
function useOnClickOutside(ref, handler) {
  useEffect(
    () => {
      const listener = event => {
        // Do nothing if clicking ref's element or descendent elements
        if (!ref.current || ref.current.contains(event.target)) {
          return;
        }

        handler(event);
      };

      document.addEventListener('mousedown', listener);
      document.addEventListener('touchstart', listener);

      return () => {
        document.removeEventListener('mousedown', listener);
        document.removeEventListener('touchstart', listener);
      };
    },
    // Add ref and handler to effect dependencies
    // It's worth noting that because passed in handler is a new ...
    // ... function on every render that will cause this effect ...
    // ... callback/cleanup to run every render. It's not a big deal ...
    // ... but to optimize you can wrap handler in useCallback before ...
    // ... passing it into this hook.
    [ref, handler]
  );
}

效果：

本文：React Hook 钩子检测外部点击, React Hook 钩子监控外部点击, react onClickOutside, react-click-outside-hook