91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

在React中如何實現contextmenu

小樊
122
2024-06-28 10:26:30
欄目: 編程語言

要在React中實現右鍵菜單,可以使用onContextMenu事件來監聽鼠標右鍵單擊事件,并根據需要顯示或隱藏菜單。下面是一個簡單的示例代碼:

import React, { useState } from 'react';

const ContextMenu = () => {
  const [showMenu, setShowMenu] = useState(false);
  const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });

  const handleContextMenu = (e) => {
    e.preventDefault();
    setShowMenu(true);
    setMenuPosition({ x: e.clientX, y: e.clientY });
  };

  const handleItemClick = () => {
    setShowMenu(false);
  };

  return (
    <div onContextMenu={handleContextMenu}>
      <div style={{ position: 'relative' }}>
        {showMenu && (
          <div
            style={{
              position: 'absolute',
              top: menuPosition.y,
              left: menuPosition.x,
              backgroundColor: '#fff',
              border: '1px solid #ccc',
              padding: '5px',
            }}
          >
            <div onClick={handleItemClick}>Item 1</div>
            <div onClick={handleItemClick}>Item 2</div>
            <div onClick={handleItemClick}>Item 3</div>
          </div>
        )}
      </div>
      Right click here to open context menu
    </div>
  );
};

export default ContextMenu;

在上面的代碼中,我們定義了一個ContextMenu組件,其中監聽了onContextMenu事件。當鼠標右鍵單擊時,會顯示一個簡單的菜單,并在點擊菜單項時隱藏菜單。你可以根據實際需求來自定義菜單的樣式和內容。

0
金山区| 龙游县| 密云县| 庆城县| 海晏县| 仙居县| 斗六市| 洪江市| 邹城市| 广饶县| 石家庄市| 康马县| 乐陵市| 和硕县| 孝昌县| 六枝特区| 永康市| 夏邑县| 普安县| 南开区| 股票| 云梦县| 罗定市| 松滋市| 上蔡县| 偃师市| 泽州县| 军事| 台北市| 千阳县| 广河县| 富顺县| 普安县| 栖霞市| 唐海县| 布拖县| 龙岩市| 博乐市| 齐河县| 内丘县| 田林县|