react实现div隐藏_react 点击空白处隐藏弹出层

点击空白处隐藏弹出层的原理是:在 document 上绑定事件来隐藏弹出层,这样点击任何元素的时候都会冒泡到 document 上,都会执行隐藏弹出层的功能。然后我们在不需要隐藏弹出层的元素上阻止冒泡即可。

class Select extends Component {

constructor(props) {

super(props);

this.state = {

selected: props.list[0],

showList: false

};

this.showList = this.showList.bind(this);

}

componentDidMount() {

// 在 document 上绑定点击事件,隐藏弹出层

document.addEventListener('click', (e) => {

this.setState({

showList: false

});

});

}

showList(e) {

// 使用 react 的 e.stopPropagation 不能阻止冒泡,需要使用 e.nativeEvent.stopImmediatePropagation,这里我们对其进行封装,方便多次调用

this.stopPropagation(e);

this.setState({

showList: !this.state.showList

});

}

selectList(i) {

const selected = this.props.list[i];

this.setState({

selected: selected,

showList: false

});

this.props.onChange(selected);

}

// 封装后的阻止冒泡功能

stopPropagation(e) {

e.nativeEvent.stopImmediatePropagation();

}

render() {

const { list } = this.props;

const { selected, showList } = this.state;

return (

{selected.text}

className="hp-select__list"

style={{ display: showList ? 'block' : 'none' }}

// 方便的调用封装冒泡功能来阻止冒泡

onClick={this.stopPropagation}

>

{

list && list.map((item, i) => {

return

{item.text};

})

}

);

}

}

js的事件冒泡和点击其他区域隐藏弹出层

一.前言 在编写页面的时候,我们经常使用到弹出层.对于弹出层,原本的意义就是增加与用户的交互,提升用户的好感度.如果弹出层都没有较好的体验,那何谈通过交互来提升好感... 首先提出几个弹出层的注意点: ...

Jquery 点击图片在弹出层显示大图

http://blog.csdn.net/wongwaidah/article/details/28432427(案例链接出处,本人只是转载收藏)

...

vue中点击空白处隐藏弹框(用指令优雅地实现)

在写vue的项目的时候,弹框经常性出现,并要求点击弹框外面,关闭弹框,那么如何实现呢?且听我一一...不了,能实现效果就好

layui如何隐藏弹出层关闭的按钮

layui默认弹出层是带有关闭按钮的,但是在某些场景我们不需要layui的关闭按钮,这时只需添加closeBtn :0即可 效果图如下: 示例代码如下: layui.use('layer', func ...

深入React事件系统(React点击空白部分隐藏弹出层;React阻止事件冒泡失效)

只关注括号内问题的同学,可直接跳转到蓝字部分.(标题起的有点大,其实只讨论一个问题) 两个在React组件上绑定的事件,产生冲突后,使用e.stopPropagation(),阻止冒泡,即可防止事件冲 ...

js 点击 隐藏弹出层

document.onmousedown = function(e){ var ev = document.all ? window.event : e; var _con = $("#ci ...

[转]Jquery 点击图片在弹出层显示大图

这个还行不需要别的包! https://www.cnblogs.com/antis/p/7053991.html

Layer 弹出页面 在点击保存关闭弹出层

...

利用React/anu编写一个弹出层

本文将一步步介绍如何使用React或anu创建 一个弹出层. React时代,代码都是要经过编译的,我们很多时间都耗在babel与webpack上.因此本文也介绍如何玩webpack与babel. 我 ...

随机推荐

华为5G空口新技术(2015年)

2015-03-24 长江后浪推前浪,4G建设方兴未艾,业界关于5G的讨论已如火如荼.对于每一代移动通信,空口技术都相当于王冠上的明珠. 在月初的世界移动通信大会上,华为发布了面向5G的新空口,并展出 ...

PHP 打印调试信息

1.将输出的数组存入文件,比如debug_trace()的输出: $debug_info = print_r(debug_backtrace(),true); file_put_contents(&q ...

MSBI - KPI

KPI - common members: Value, Target, Status, Trend.

[转]C#面试题

本文转自http://www.cnblogs.com/lhws/archive/2010/09/21/1827115.html 1.维护数据库的完整性.一致性.你喜欢用触发器还是自写业务逻辑?为什么? ...

使用 Attribute +反射 来对两个类之间动态赋值

看同事使用的 一个ORM 框架 中 有这样一个功能  通过特性(附加属性)的功能来 实现的两个类对象之间动态赋值的 功能 觉得这个功能不错,但是同事使用的 ORM 并不是我使用的  Dapper  所 ...

转:Stack Overflow通过关注性能,实现单块应用架构的扩展能力

原文来自于:http://www.infoq.com/cn/news/2015/07/scaling-stack-overflow 在New York QCon 2015大会上,David Fulle ...

Thread thread2 = new Thread()

Thread thread2 = new Thread() { @Override public void run() { test.function(); } }; thread1.start(); ...

2017 UESTC Training for Graph Theory

图论姿势太弱,这套题做了好久.. A:枚举最短那条边,然后最小生成树那种操作,1 和 n 联通就算答案 B:考虑到假如我们能凑出x的话,那很明显我们也能凑出任意数表示x + ai,考虑选取一个ai,然 ...

thinkphp分页带数据

因为用thinkphp做分页时候点击下一页后搜索栏的数据会清空,然后点击下一页后刷新完了就没有内容了,感觉网上查找和我自己研究在不适用ajax做分页的情况下用以下代码就可以实现!!通过把值扔地址栏来进 ...

Freeswitch配置之sofia

SIP模块 - mod_sofia SIP 模块是 FreeSWITCH的主要模块. 在 FreeSWITCH中,实现一些互联协议接口的模块称为 Endpoint.FreeSWITH支持很多的 End ...

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页

打赏作者

weixin_39610722

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值