时间:2021-07-01 10:21:17 帮助过:36人阅读
要用到的方法:
1.contains:就是判断某个元素是不是选定元素的子元素(或本身);
2.window.event.target:返回事件的目标节点,比如你点击了某个<h1></h1>,它就返回这个h1;(万恶的ie不支持)
3.addEventListener:事件监听,示例,document.body.addEventListener('click',function(){ });
4.ref,这个是react提供的选择真实dom元素的方法,和js原生的document.document.getelementby...系列作用一样
示例:
<p
ref={(r) => {
this.pElem = r;
}}
>
</p>
上面是es6的用法,es5(不推荐)看这里
废话说完,上图上代码:
效果图:
代码:
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;
以上就是如何利用contains方法实现点击界面空白部分关闭当前面板的效果的详细内容,更多请关注Gxl网其它相关文章!