Reactで右クリックをキャンセルする方法

反応での右クリックをキャンセルする方法: 1. 対応する反応ファイルを開きます; 2. コード「componentDidMount(){document.oncontextmenu = function (e) {e = e || window.event」を追加します。 ; return false ;};}" を使用すると、ブラウザのデフォルトの右クリック イベントがブロックされます。

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

react で右クリックをキャンセルするにはどうすればよいですか?

反応ページでブラウザのデフォルトの右クリック イベントをブロックする

componentDidMount() {
    document.oncontextmenu = function (e) {/*屏蔽浏览器默认右键事件*/
        e = e || window.event;
        return false;
    };
}

関連拡張機能:

React コンポーネントDidMount() メソッド

React コンポーネントlifecycleReact コンポーネントのライフサイクル

componentDidMount() メソッドの形式は次のとおりです。

componentDidMount()

componentDidMount() メソッドは、コンポーネントがマウントされた (DOM ツリーに挿入された) 直後に呼び出されます。

DOM ノードに依存する初期化は、componentDidMount() メソッドに配置する必要があります。

次の例では、最初に runoob を出力し、コンポーネントがマウントされた後に、componentDidMount() メソッドを使用して google の出力を設定します。

Example

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritesite: "runoob"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritesite: "google"})
    }, 1000)
  }
  render() {
    return (
      <h1>我喜欢的网站是 {this.state.favoritesite}</h1>
    );
  }
}
 
ReactDOM.render(<Header />, document.getElementById(&#39;root&#39;));

推奨学習: "react ビデオ チュートリアル >>

以上がReactで右クリックをキャンセルする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。