javascript - 检测点击外部 react 父组件

Question

如何知道用户在我们指向的 React 应用之外点击了

<div id="root">

(我有额外的空间来点击根 div 之外)

我试过下面的代码

import ReactDOM from 'react-dom';
// ... ✂

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

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

handleClickOutside = event => {
    const domNode = ReactDOM.findDOMNode(this);

    if (!domNode || !domNode.contains(event.target)) {
        this.setState({
            visible: false
        });
    console.log("clicked outside")
    }
}

但是，即使我在父项下的某个子弹出组件中单击，它也显示为“在外部单击”

如果我点击应用内的任何地方(包括子组件)，它不应该说“点击外部”

那么有什么方法可以知道用户点击了整个应用本身以外的地方吗？

Answer 1

最简单的方法是为应用程序容器(树中最外层的元素)设置一个监听器，而不是寻找 id="root" 元素。

因此，对于给定的 index.html:

<div id="root"></div>
<div>Div which outside of app</div>

可能的实现可以是(检查日志):

function useOnClickOutside(ref, handler) {
  useEffect(() => {
    const listener = event => {
      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);
    };
  }, [ref, handler]);
}

const App = () => {
  const divRef = useRef();
  const handler = useCallback(() => console.log(`Click Outside`), []);
  useOnClickOutside(divRef, handler);

  return (
    <div
      ref={divRef}
      style={{
        margin: `0.5rem`,
        padding: `1rem`,
        border: `2px solid black`,
        cursor: `pointer`
      }}
    >
      Application
    </div>
  );
};

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);