Как определить клик за пределами компонента React?

Опубликовано: 7 Августа, 2021

Мы можем использовать метод createRef () для создания ссылки на любой элемент в компоненте на основе классов. Затем мы можем проверить, произошло ли событие щелчка в компоненте или вне компонента.

В функциональном компоненте мы можем использовать ловушку useRef () для создания ссылки на любой элемент.

Создание приложения React и установка модуля:

Шаг 1. Создайте приложение React, используя следующую команду:

 npx создать-реагировать-приложение имя папки

Шаг 2: После создания папки проекта, т.е. имени папки , перейдите в нее с помощью следующей команды:

cd имя папки

Структура проекта: это будет выглядеть следующим образом.

Структура проекта

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 <div style={{
      margin: 300,
      width: 200, height: 200, backgroundColor: 'green'
    }}
 
      // Assigning the ref to div component
      ref={ this .box}>{ this .props.children}</div>;
  }
 }
 
export App; default 

Имя файла - App.js: <Использование функционального компонента / p>

Javascript

 import React, { useEffect, useRef } from 'react'
 
function App(props) {
  const box = useRef( null );
  useOutsideAlerter(box);
  return (<div style={{
    margin: 300,
    width: 200, height: 200, backgroundColor: 'green'
  }}
    ref={box}>{props.children}</div>
  )
 }
 
export App; default
 
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);
 
  }, [ref]);
 }

Шаг для запуска приложения: запустите приложение, используя следующую команду из корневого каталога проекта:

 npm start

Вывод: Теперь откройте браузер и перейдите по адресу http: // localhost: 3000 / , вы увидите следующий вывод:

JavaScript Picked

Как определить клик за пределами компонента React?

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ