So verwenden Sie die Methode „Contains', um den Effekt zu erzielen, dass das aktuelle Bedienfeld durch Klicken auf einen leeren Teil der Benutzeroberfläche geschlossen wird-js-Tutorial-php.cn

So verwenden Sie die Methode „Contains', um den Effekt zu erzielen, dass das aktuelle Bedienfeld durch Klicken auf einen leeren Teil der Benutzeroberfläche geschlossen wird

一个新手

Freigeben： 2017-10-17 09:36:13

Original

2058 Leute haben es durchsucht

Heute habe ich der Komponente eine kleine Funktion hinzugefügt. Sie müssen auf den leeren Teil der Schnittstelle klicken, um die aktuelle Komponente zu schließen. Nach einer Weile habe ich festgestellt, dass es sich bei der Methode hauptsächlich um JQuery handelt, und es gibt fast keine native js. Es stürzt ab. . Es ist schwer, es herauszuholen, machen Sie sich einfach eine Notiz, ps: Ich verwende React

Die zu verwendende Methode:

1.contains: Es dient dazu, zu bestimmen, ob ein Element ausgewählt ist . Das untergeordnete Element (oder sich selbst) des angegebenen Elements;

2.window.event.target: Gibt zum Beispiel den Zielknoten des Ereignisses zurück; h1>, es wird dieses h1; zurückgeben (das böse Beispiel unterstützt es nicht)

3.addEventListener: Ereignisüberwachung, Beispiel, document.body.addEventListener('click',function(){ });

4.ref, dies ist eine von React bereitgestellte Methode zum Auswählen echter Dom-Elemente. Sie hat die gleiche Funktion wie die js-native document.document.getelementby...-Serie

<strong>示例：<br/><p</strong><br/><strong>  ref={(r) => {</strong><br/><strong>    this.pElem = r;</strong><br/><strong>  }}</strong><br/><strong>></strong><br/><strong></p></strong>

Nach dem Login kopieren

Das Obige ist die Verwendung von es6, es5 (nicht empfohlen), siehe hier

Nach all dem Unsinn der Code auf dem Bild oben:

Rendering:

Code:

import React, { Component } from &#39;react&#39;;
import &#39;./index.less&#39;;

class CloseTheDomByClickBlankArea extends Component {
  state = {
    openCurrentArea: true,
  };

  componentDidMount() {
    // 点击blank_area区域，关闭current_area面板
    this.blankAreaElem.addEventListener(&#39;click&#39;, 
　    this.handleClickCloseCurrentArea.bind(this));
  }

  handleClickCloseCurrentArea() {
    // 当界面上渲染出内部面板时，可执行如下操作（若无此判断条件，点击打开面板按钮区域，
　　　  就会先触发如下操作，再触发handleClickOpenCurrentArea函数）
    if (document.body.contains(this.currentAreaElem)) {
      // 点击面板以外的部分（灰色区域以内，面板区域以外），就关闭面板
      if (this.blankAreaElem.contains(window.event.target) 
　　　　　&& !this.currentAreaElem.contains(window.event.target)
　　　 ) {
        this.setState({
          openCurrentArea: false,
        })
      }
    }
  }

  // 点击"打开面板"按钮，打开面板
  handleClickOpenCurrentArea() {
    this.setState({
      openCurrentArea: true,
    })
  }

  render() {
    return (
      <p
        className="blank_area"
        ref={(r) => {
          this.blankAreaElem = r;
        }}
      >

　　　   {/* 打开面板按钮 */}
        <a
          role="button"
          tabIndex="0"
          className="btn_open_current_area"
          onClick={this.handleClickOpenCurrentArea.bind(this)}
        >
          <p className="btn_open_current_area_text">打开面板</p>
        </a>

Nach dem Login kopieren

　　　   {/* 要关闭或开启的面板current_area */}

Nach dem Login kopieren

        {
          this.state.openCurrentArea
          &&
          <p
            className="current_area"
            ref={(r) => {
              this.currentAreaElem = r;
            }}
          >
            <p className="current_area_text">点击旁边灰色区域关闭当前面板</p>
          </p>
        }
      </p>
    );
  }
}

export default CloseTheDomByClickBlankArea;

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Methode „Contains', um den Effekt zu erzielen, dass das aktuelle Bedienfeld durch Klicken auf einen leeren Teil der Benutzeroberfläche geschlossen wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!