Reactで右クリックを禁止にする方法
Reactで右クリックを禁止にする方法をTypeScriptで実装する例を紹介します。
今回はライブラリのインストールは不要です。
import React, { useEffect } from 'react'; const App: React.FC = () => { useEffect(() => { const handleContextMenu = (event: MouseEvent) => { event.preventDefault(); alert("右クリックは禁止されています。"); }; document.addEventListener('contextmenu', handleContextMenu); // クリーンアップ関数を返す return () => { document.removeEventListener('contextmenu', handleContextMenu); }; }, []); return ( <div> <h1>右クリック禁止の例</h1> <p>このページでは右クリックは無効化されています。</p> </div> ); }; export default App;
このコードは、Reactコンポーネントのマウント時にcontextmenuイベントリスナーを追加し、右クリックを無効化します。
また、コンポーネントのアンマウント時にイベントリスナーを削除してクリーンアップします。
説明
- useEffectフックを使用して、コンポーネントがマウントされたときにcontextmenuイベントを監視し、右クリックを無効化します。
- event.preventDefault()を呼び出すことで、右クリックメニューの表示を防ぎます。
- alertを使用してユーザーに通知するメッセージを表示します。
この方法で、Reactアプリケーション内で右クリックを禁止することができます。