利用contains方法實現：點擊界面空白部分關閉當前面板

今天給組件添加一個小功能，需要點擊界面空白部分關閉當前組件，找了好一會兒，發現主要是jquery的方法，js原生幾乎沒有，崩潰。。好不容易弄出來了，就給自己做個筆記吧，ps：我用的react

要用到的方法：

1.contains：就是判斷某個元素是不是選定元素的子元素（或本身）；

鏈接：https://www.w3schools.com/Jsref/met_node_contains.asp

2.window.event.target：返回事件的目標節點，比如你點擊了某個<h1></h1>，它就返回這個h1；（萬惡的ie不支持）

鏈接：http://www.w3school.com.cn/jsref/event_target.asp

3.addEventListener：事件監聽，示例，document.body.addEventListener('click',function(){ });

 鏈接：http://www.runoob.com/jsref/met-element-addeventlistener.html

4.ref，這個是react提供的選擇真實dom元素的方法，和js原生的document.document.getelementby...系列作用一樣

示例：
<div
  ref={(r) => {
    this.divElem = r;
  }}
>
</div>

上面是es6的用法，es5（不推薦）看這裡: http://www.runoob.com/react/react-refs.html

廢話說完，上圖上代碼：

效果圖：

代碼：

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 (
      <div
        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
          &&
          <div
            className="current_area"
            ref={(r) => {
              this.currentAreaElem = r;
            }}
          >
            <p className="current_area_text">點擊旁邊灰色區域關閉當前面板</p>
          </div>
        }
      </div>
    );
  }
}

export default CloseTheDomByClickBlankArea;

GitHub項目鏈接：https://github.com/AbrahamJiang/my-react-demos

本文代碼在src下CloseTheDomByClickBlankContain/中。