如何利用contains方法實(shí)現(xiàn)點(diǎn)擊界面空白部分關(guān)閉當(dāng)前面板的效果

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

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

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

 componentDidMount() {
 // 點(diǎn)擊blank_area區(qū)域，關(guān)閉current_area面板
 this.blankAreaElem.addEventListener('click', 
　 this.handleClickCloseCurrentArea.bind(this));
 }

 handleClickCloseCurrentArea() {
 // 當(dāng)界面上渲染出內(nèi)部面板時(shí)，可執(zhí)行如下操作（若無(wú)此判斷條件，點(diǎn)擊打開(kāi)面板按鈕區(qū)域，
　　　 就會(huì)先觸發(fā)如下操作，再觸發(fā)handleClickOpenCurrentArea函數(shù)）
 if (document.body.contains(this.currentAreaElem)) {
 // 點(diǎn)擊面板以外的部分（灰色區(qū)域以內(nèi)，面板區(qū)域以外），就關(guān)閉面板
 if (this.blankAreaElem.contains(window.event.target) 
　　　　　&& !this.currentAreaElem.contains(window.event.target)
　　　 ) {
 this.setState({
 openCurrentArea: false,
 })
 }
 }
 }

 // 點(diǎn)擊"打開(kāi)面板"按鈕，打開(kāi)面板
 handleClickOpenCurrentArea() {
 this.setState({
 openCurrentArea: true,
 })
 }

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

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

　　　

　　　 {/* 要關(guān)閉或開(kāi)啟的面板current_area */}

 {
 this.state.openCurrentArea
 &&
 <p
 className="current_area"
 ref={(r) => {
 this.currentAreaElem = r;
 }}
 >
 <p className="current_area_text">點(diǎn)擊旁邊灰色區(qū)域關(guān)閉當(dāng)前面板</p>
 </p>
 }
 </p>
 );
 }
}

export default CloseTheDomByClickBlankArea;