react怎麼取消右鍵

藏色散人
發布: 2023-01-04 16:46:44
原創
2213 人瀏覽過

react取消右鍵的方法:1、開啟對應的react檔案;2、透過新增程式碼「componentDidMount(){document.oncontextmenu = function (e) {e = e || window.event;return false ;};}”來實現屏蔽瀏覽器預設右鍵事件即可。

react怎麼取消右鍵

本教學操作環境:Windows10系統、react18.0.0版、Dell G3電腦。

react怎麼取消右鍵?

react頁面中屏蔽瀏覽器預設右鍵事件

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

相關拓展:

React componentDidMount() 方法

React 元件生命週期React元件生命週期

componentDidMount() 方法格式如下:

componentDidMount()
登入後複製

componentDidMount() 方法在元件掛載後(插入DOM 樹)立即呼叫。

依賴 DOM 節點的初始化應該放在 componentDidMount() 方法中。

以下實例會先輸出runoob,然後使用componentDidMount() 方法設定在元件掛載後輸出google:

實例

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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板