如何检测 React 组件外部的点击？

我们可以使用createRef() 方法为基于类的组件中的任何元素创建引用。然后我们可以检查点击事件是发生在组件内部还是组件外部。

在功能组件中，我们可以使用 useRef() 挂钩为任何元素创建引用。

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

项目结构：它将如下所示。

项目结构

App.js：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

文件名- App.js：使用类基础组件

Javascript

import React from 'react';
class App extends React.Component {
 
  constructor(props) {
    super(props);
 
    // Creating a reference
    this.box = React.createRef();
  }
 
  componentDidMount() {
 
    // Adding a click event listener
    document.addEventListener('click', this.handleOutsideClick);
  }
 
  handleOutsideClick = (event) => {
    if (this.box && !this.box.current.contains(event.target)) {
      alert('you just clicked outside of box!');
    }
  }
 
  render() {
    return 
{this.props.children}
;
  }
}
 
export default App;

文件名- App.js: <使用功能组件/p>

Javascript

import React, { useEffect, useRef } from 'react'
 
function App(props) {
  const box = useRef(null);
  useOutsideAlerter(box);
  return (
{props.children}
  )
}
 
export default App;
 
function useOutsideAlerter(ref) {
  useEffect(() => {
 
    // Function for click event
    function handleOutsideClick(event) {
      if (ref.current && !ref.current.contains(event.target)) {
        alert("you just clicked outside of box!");
      }
    }
 
    // Adding click event listener
    document.addEventListener("click", handleOutsideClick);
    return () => document.removeEventListener("click", handleOutsideClick);
  }, [ref]);
}

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：