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组件。