How to cancel right click in react

How to cancel the right click in react: 1. Open the corresponding react file; 2. Add the code "componentDidMount(){document.oncontextmenu = function (e) {e = e || window.event; return false ;};}" to block the browser's default right-click event.

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

How to cancel the right click in react?

Block the browser's default right-click event in the react page

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

Related extensions:

React componentDidMount() method

React component life cycleReact Component life cycle

componentDidMount() method format is as follows:

componentDidMount()

componentDidMount() method is called immediately after the component is mounted (inserted into the DOM tree).

Initialization that depends on DOM nodes should be placed in the componentDidMount() method.

The following example will first output runoob, and then use the componentDidMount() method to set the output of google after the component is mounted:

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;));

Recommended learning: "react Video tutorial》

The above is the detailed content of How to cancel right click in react. For more information, please follow other related articles on the PHP Chinese website!