Comment éviter l'échec du bouillonnement en réaction-js tutoriel-php.cn

Comment éviter l'échec du bouillonnement en réaction

coldplay.xixi

Libérer： 2020-11-17 14:08:09

original

2033 Les gens l'ont consulté

Méthodes de réaction pour éviter l'échec du bouillonnement : 1. Lorsqu'il n'y a pas d'enregistrement d'événement natif et que seuls les événements de réaction sont impliqués, utilisez [e.stopPropagation()] pour empêcher le bouillonnement ; .nativeEvent.stopImmediatePropagation()].

Comment éviter l'échec du bouillonnement en réaction

Méthode React pour éviter les échecs de bouillonnement :

1. Seuls les événements de réaction sont enregistrés lorsqu'il n'y a pas d'événement natif. impliqué. Lors de l'utilisation de e.stopPropagation() pour empêcher le bouillonnement, le code est le suivant :

import React, { Component } from &#39;react&#39;;
import &#39;./App.css&#39;;
class App extends Component {
  handleClickTestBox = (e) => {
    console.warn(&#39;handleClickTestBox: &#39;, e);
  }
  handleClickTestBox2 = (e) => {
    console.warn(&#39;handleClickTestBox2: &#39;, e);
  }
  handleClickTestBox3 = (e) => {
    e.stopPropagation();
    console.warn(&#39;handleClickTestBox3: &#39;, e);
  }
  render() {
    return (
      <div
        className="test-box"
        onClick={this.handleClickTestBox}
      >
        <div
          onClick={this.handleClickTestBox2}
        >
          <div
            onClick={this.handleClickTestBox3}
          >
          </div>
        </div>
      </div>
    );
  }
}
export default App;

Copier après la connexion

2. Lorsque vous utilisez document.addEventListener pour enregistrer des événements natifs, l'utilisation de e.stopPropagation() ne peut pas empêcher le bouillonnement avec le document, alors vous devez utiliser la méthode e.nativeEvent.stopImmediatePropagation(), le code est le suivant :

import React, { Component } from &#39;react&#39;;
import &#39;./App.css&#39;;
class App extends Component {
  componentDidMount() {
    document.addEventListener(&#39;click&#39;, this.handleDocumentClick, false);
  }
  handleDocumentClick = (e) => {
    console.log(&#39;handleDocumentClick: &#39;, e);
  }
  handleClickTestBox = (e) => {
    console.warn(&#39;handleClickTestBox: &#39;, e);
  }
  handleClickTestBox2 = (e) => {
    console.warn(&#39;handleClickTestBox2: &#39;, e);
  }
  handleClickTestBox3 = (e) => {
    // 阻止合成事件的冒泡
    e.stopPropagation();
    // 阻止与原生事件的冒泡
    e.nativeEvent.stopImmediatePropagation();
    console.warn(&#39;handleClickTestBox3: &#39;, e);
  }
  render() {
    return (
      <div
        className="test-box"
        onClick={this.handleClickTestBox}
      >
        <div
          onClick={this.handleClickTestBox2}
        >
          <div
            onClick={this.handleClickTestBox3}
          >
          </div>
        </div>
      </div>
    );
  }
}
export default App;

Copier après la connexion

3. Empêcher les bulles entre les événements synthétiques et les événements non synthétiques (sauf document Les deux méthodes ci-dessus ne sont pas applicables, vous avez besoin). à utiliser Allez sur e.target pour juger, le code est le suivant :

import React, { Component } from &#39;react&#39;;
import &#39;./App.css&#39;;
class App extends Component {
  componentDidMount() {
    document.addEventListener(&#39;click&#39;, this.handleDocumentClick, false);
    document.body.addEventListener(&#39;click&#39;, this.handleBodyClick, false);
  }
  handleDocumentClick = (e) => {
    console.log(&#39;handleDocumentClick: &#39;, e);
  }
  handleBodyClick = (e) => {
    if (e.target && e.target === document.querySelector(&#39;#inner&#39;)) {
      return;
    }
    console.log(&#39;handleBodyClick: &#39;, e);
  }
  handleClickTestBox = (e) => {
    console.warn(&#39;handleClickTestBox: &#39;, e);
  }
  handleClickTestBox2 = (e) => {
    console.warn(&#39;handleClickTestBox2: &#39;, e);
  }
  handleClickTestBox3 = (e) => {
    // 阻止合成事件的冒泡
    e.stopPropagation();
    // 阻止与原生事件的冒泡
    e.nativeEvent.stopImmediatePropagation();
    console.warn(&#39;handleClickTestBox3: &#39;, e);
  }
  render() {
    return (
      <div
        className="test-box"
        onClick={this.handleClickTestBox}
      >
        <div
          onClick={this.handleClickTestBox2}
        >
          <div
            id="inner"
            onClick={this.handleClickTestBox3}
          >
          </div>
        </div>
      </div>
    );
  }
}
export default App;

Copier après la connexion