Визначити правий клік у React-Приклади коду

Radu TM
Victor Talmacinschi

Визначити правий клік у React

JavaScript за Victor Talmacinschi June 16, 2022

import React, { useState } from "react";

const RightClickDetector = () => {
  // Використовуйте useState, щоб відслідковувати, було виявлено правий клік
  const [isRightClick, setIsRightClick] = useState(false);

  const handleContextMenu = (e) => {
    // Запобігайте поширенню контекстного меню браузера
    e.preventDefault();
    // Оновіть стан, щоб відобразити, що було виконано правий клік
    setIsRightClick(true);
    // Скиньте стан після короткого затримання
    setTimeout(() => setIsRightClick(false), 250);
  };

  return (
    <div onContextMenu={handleContextMenu}>
      {isRightClick ? "Правий клік!" : "Лівий клік!"}
    </div>
  );
};

export default RightClickDetector;

0

28.844

Визначити правий клік у React

JavaScript за Radu TM June 16, 2022

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

const RightClickDetector = () => {
  // Використовуйте useState для відстеження правих кліків
  const [isRightClick, setIsRightClick] = useState(false);

  // Використовуйте useEffect для додавання / видалення події прослуховувача
  useEffect(() => {
    // Додати подію прослуховувача при монтуванні
    document.addEventListener("contextmenu", handleRightClick);
    // Видаліть подію прослуховувача при розмонтуванні
    return () => document.removeEventListener("contextmenu", handleRightClick);
  }, []); // Порожній масив гарантує, що ефект буде запущений лише при монтуванні і розмонтуванні

  const handleRightClick = (e) => {
    e.preventDefault();
    setIsRightClick(true);
  };

  return (
    <div>
      {isRightClick ? (
        <p>Ви натиснули праву кнопку!</p>
      ) : (
        <p>Спробуйте натиснути праву кнопку звідки-небудь на цій сторінці.</p>
      )}
    </div>
  );
};

export default RightClickDetector;

0

28.844

Подібні JavaScript запити

Останні JavaScript запити

Відгуки про код за категоріями