首頁 > web前端 > 前端問答 > react怎麼取消右鍵

react怎麼取消右鍵

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

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

react怎麼取消右鍵

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

react怎麼取消右鍵?

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

1

2

3

4

5

6

componentDidMount() {

    document.oncontextmenu = function (e) {/*屏蔽浏览器默认右键事件*/

        e = e || window.event;

        return false;

    };

}

登入後複製

相關拓展:

React componentDidMount() 方法

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

componentDidMount() 方法格式如下:

1

componentDidMount()

登入後複製

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

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

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

實例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

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

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