So verhindern Sie Blasenfehler in der Reaktion-js-Tutorial-php.cn

So verhindern Sie Blasenfehler in der Reaktion

coldplay.xixi

Freigeben： 2020-11-17 14:08:09

Original

2033 Leute haben es durchsucht

Reaktionsmethoden zur Verhinderung von Blasenbildung: 1. Wenn keine native Ereignisregistrierung vorliegt und nur Reaktionsereignisse beteiligt sind, verwenden Sie [e.stopPropagation()], um Blasenbildung zu verhindern. 2. Sie müssen [e.nativeEvent.stopImmediatePropagation ()]-Methode.

So verhindern Sie Blasenfehler in der Reaktion

Methoden zum Reagieren, um Blasenbildung zu verhindern:

1. Wenn keine native Ereignisregistrierung vorliegt und nur Reaktionsereignisse beteiligt sind, verwenden Sie e.stopPropagation(), um Blasenbildung zu verhindern , Code wie folgt: e.stopPropagation()阻止冒泡，代码如下：

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;

Nach dem Login kopieren

2、当用document.addEventListener注册了原生的事件后，用e.stopPropagation()是不能阻止与document之间的冒泡，这时候需要用到e.nativeEvent.stopImmediatePropagation()方法，代码如下：

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;

Nach dem Login kopieren

3、阻止合成事件与非合成事件（除了document）之间的冒泡，以上两种方式都不适用，需要用到e.target

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;

Nach dem Login kopieren

2. Wenn Sie document.addEventListener verwenden, um ein natives Ereignis zu registrieren, kann die Verwendung von e.stopPropagation() das Sprudeln mit dem Dokument nicht verhindern. In diesem Fall kann e. nativeEvent.stopImmediatePropagation()-Methode, der Code lautet wie folgt:

rrreee
3. Verhindern Sie das Sprudeln zwischen synthetischen Ereignissen und nicht-synthetischen Ereignissen (außer document), Sie müssen e.target Urteil, der Code lautet wie folgt: rrreee
Verwandte kostenlose Lernempfehlungen:

JavaScript🎜 (Video) 🎜🎜

Das obige ist der detaillierte Inhalt vonSo verhindern Sie Blasenfehler in der Reaktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!