Comment utiliser la méthode contain pour obtenir l'effet de fermer le panneau actuel en cliquant sur une partie vide de l'interface

Aujourd'hui, j'ai ajouté une petite fonction au composant. Vous devez cliquer sur la partie vide de l'interface pour fermer le composant actuel. Après avoir cherché un moment, j'ai trouvé que la méthode est principalement jquery, et il n'y en a presque pas. js natif. Il plante. . C'est difficile de le sortir, il suffit de le noter par vous-même, ps : j'utilise réagir

La méthode à utiliser :

1.contains : C'est pour déterminer si un élément est sélectionné . L'élément enfant (ou lui-même) de l'élément spécifié ;

2.window.event.target : renvoie le nœud cible de l'événement. Par exemple, si vous cliquez sur un

, il renverra ce h1; (le mauvais ie ne le supporte pas)

3.addEventListener : écoute d'événement, exemple, document.body.addEventListener('click',function(){ });

4.ref , il s'agit d'une méthode fournie par React pour sélectionner des éléments dom réels, et a la même fonction que la série native js document.document.getelementby...

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

Ce qui précède est l'utilisation de es6, es5 (non recommandé) voir ici

Après toutes ces bêtises, le code sur l'image ci-dessus :

Rendu :

Code :

import React, { Component } from 'react';
import './index.less';

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

  componentDidMount() {
    // 点击blank_area区域，关闭current_area面板
    this.blankAreaElem.addEventListener('click', 
　    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>

　　　

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

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

export default CloseTheDomByClickBlankArea;

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!