BFE.devAI解答 - React 代码题
15. useClickOutside()

题目要求实现一个名为useClickOutside()的React Hook，用于在点击元素外面时执行回调函数，实现类似页面头部菜单的下拉框点击外部关闭的效果。

以下是实现示例代码：

import { useEffect, useRef } from 'react';

function useClickOutside(handler) {
  const ref = useRef();

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

    document.addEventListener('mousedown', handleClickOutside);

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

  return ref;
}

export default useClickOutside;

在useClickOutside() Hook中，我们首先使用useRef()提供的引用来创建一个对DOM节点或React组件的引用。然后我们在组件上使用这个引用，并在useEffect的回调函数中添加了一个mousedown事件监听器。在回调函数内部，我们通过contains()函数来检查鼠标单击事发生在引用元素之外还是之内。如果鼠标单击在元素之外，我们触发传入回调函数。最后，我们返回创建的引用，以便应用程序可以直接将其应用于需要调用此功能的React组件。