要使“焦点”解决方案适用于带有事件侦听器的下拉列表，您可以使用onMouseDown事件而不是onClick来添加它们。这样，事件将启动，之后弹出窗口将关闭，如下所示：

<TogglePopupButton
                    onClick = { this.toggleDropup }
                    tabIndex = '0'
                    onBlur = { this.closeDropup }
                />
                { this.state.isOpenedDropup &&
                <ul className = { dropupList }>
                    { this.props.listItems.map((item, i) => (
                        <li
                            key = { i }
                            onMouseDown = { item.eventHandler }
                        >
                            { item.itemName}
                        </li>
                    ))}
                </ul>
                }

这是我解决问题的方法

我从我的自定义钩子返回一个布尔值，当这个值发生变化时（如果单击在我作为参数传递的ref之外，则为true），这样我就可以用useEffect钩子捕捉到这个变化，我希望你能清楚。

下面是一个活生生的例子：codesandbox上的实时示例

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

const useOutsideClick = (ref) => {
  const [outsieClick, setOutsideClick] = useState(null);

  useEffect(() => {
    const handleClickOutside = (e) => {
      if (!ref.current.contains(e.target)) {
        setOutsideClick(true);
      } else {
        setOutsideClick(false);
      }

      setOutsideClick(null);
    };

    document.addEventListener("mousedown", handleClickOutside);

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

  return outsieClick;
};

export const App = () => {
  const buttonRef = useRef(null);
  const buttonClickedOutside = useOutsideClick(buttonRef);

  useEffect(() => {
    // if the the click was outside of the button
    // do whatever you want
    if (buttonClickedOutside) {
      alert("hey you clicked outside of the button");
    }
  }, [buttonClickedOutside]);

  return (
    <div className="App">
      <button ref={buttonRef}>click outside me</button>
    </div>
  );
}

以上答案中没有一个对我有效，所以我最终做了如下：

从“React”导入React，｛Component｝；

/**
 * Component that alerts if you click outside of it
 */
export default class OutsideAlerter extends Component {
  constructor(props) {
    super(props);

    this.handleClickOutside = this.handleClickOutside.bind(this);
  }

  componentDidMount() {
    document.addEventListener('mousedown', this.handleClickOutside);
  }

  componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClickOutside);
  }

  /**
   * Alert if clicked on outside of element
   */
  handleClickOutside(event) {
    if (!event.path || !event.path.filter(item => item.className=='classOfAComponent').length) {
      alert('You clicked outside of me!');
    }
  }

  render() {
    return <div>{this.props.children}</div>;
  }
}

OutsideAlerter.propTypes = {
  children: PropTypes.element.isRequired,
};

带打字稿函数Tooltip（）：ReactElement{const[show，setShow]=useState（false）；const-ref=useRef<HTMLDivElement>（null）；使用效果（（）=>{函数handleClickOutside（事件：MouseEvent）：void{if（ref.current&&！ref.current.includes（event.target作为节点））{setShow（false）；}}//绑定事件侦听器document.addEventListener（'mouseown'，handleClickOutside）；返回（）=>{//清理时取消绑定事件侦听器document.removeEventListener（'usedown'，handleClickOutside）；};});返回(＜div ref＝｛ref｝＞＜/div＞) }

Ez的方式。。。（2022年更新）

创建挂钩：useOutsideClick.ts

export function useOutsideClick(ref: any, onClickOut: () => void){
    useEffect(() => {
        const onClick = ({target}: any) => !ref.contains(target) && onClickOut?.()
        document.addEventListener("click", onClick);
        return () => document.removeEventListener("click", onClick);
    }, []);
}

将componentRef添加到组件并调用useOutsideClick

export function Example(){

  const componentRef = useRef();

  useOutsideClick(componentRef.current!, () => {
   // do something here
  });

  return ( 
    <div ref={componentRef as any}> My Component </div>
  )
}

将onClick处理程序添加到顶级容器中，并在用户单击时增加状态值。将该值传递给相关组件，每当该值发生变化时，您就可以执行操作。

在本例中，每当clickCount值更改时，我们都会调用this.closeDropdown（）。

incrementClickCount方法在.app容器中激发，而不是在下拉列表中激发，因为我们使用event.stopPropagation（）来防止事件冒泡。

您的代码可能最终看起来像这样：

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            clickCount: 0
        };
    }
    incrementClickCount = () => {
        this.setState({
            clickCount: this.state.clickCount + 1
        });
    }
    render() {
        return (
            <div className="app" onClick={this.incrementClickCount}>
                <Dropdown clickCount={this.state.clickCount}/>
            </div>
        );
    }
}
class Dropdown extends Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false
        };
    }
    componentDidUpdate(prevProps) {
        if (this.props.clickCount !== prevProps.clickCount) {
            this.closeDropdown();
        }
    }
    toggleDropdown = event => {
        event.stopPropagation();
        return (this.state.open) ? this.closeDropdown() : this.openDropdown();
    }
    render() {
        return (
            <div className="dropdown" onClick={this.toggleDropdown}>
                ...
            </div>
        );
    }
}