Maison  >  Article  >  interface Web  >  Comment annuler le clic droit en réaction

Comment annuler le clic droit en réaction

藏色散人
藏色散人original
2023-01-03 14:42:452221parcourir

Comment annuler le clic droit dans React : 1. Ouvrez le fichier React correspondant ; 2. Ajoutez le code "componentDidMount(){document.oncontextmenu = function (e) {e = e || window.event;return false; };} » pour bloquer l'événement de clic droit par défaut du navigateur.

Comment annuler le clic droit en réaction

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Comment annuler le clic droit en React ?

Bloquer les événements de clic droit par défaut du navigateur dans les pages de réaction

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

Extensions associées :

Méthode React composantDidMount()

Cycle de vie du composant React Cycle de vie du composant React

componentDidMount() Le format de la méthode est le suivant :

componentDidMount()
La méthode

componentDidMount() est appelée immédiatement après le montage du composant (inséré dans l'arborescence DOM).

L'initialisation qui dépend des nœuds DOM doit être placée dans la méthode composantDidMount().

L'exemple suivant affichera d'abord runoob, puis utilisera la méthode componentDidMount() pour définir la sortie sur Google une fois le composant monté :

Exemple

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

Apprentissage recommandé : "Tutoriel vidéo React"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn