Maison > interface Web > Questions et réponses frontales > Comment annuler le clic droit en réaction

Comment annuler le clic droit en réaction

藏色散人
Libérer: 2023-01-04 16:46:44
original
2250 Les gens l'ont consulté

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;
    };
}
Copier après la connexion

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()
Copier après la connexion
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;));
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal