react判断点击位置是否为组件内,实现点击外部触发组件内事件
1.导入
2.绑定ref
<div ref="refTest"
</div>
//监听外部click
componentDidMount() {
document.addEventListener('mousedown', (e)=>this.handleClickOutside(e), false);
}
componentWillUnmount() {
document.removeEventListener('mousedown', (e)=>this.handleClickOutside(e), false);
}
handleClickOutside(e) {
const target = e.target;
console.log(target);
console.log(this);
// 组件已挂载且事件触发对象不在div内
let result=findDOMNode(this.refs.refTest).contains(e.target);
if( !result) {
console.log("ssscs");
this.setState({
ulShow:false
});
}
}
强制重新渲染
react判断点击位置是否为组件内,实现点击外部触发组件内事件的更多相关文章
- jqgrid 点击列头的超链接或按钮时,不触发列排序事件
接上篇文章:jqgrid 将列头设置为超链接或按钮 如果在列头设置了超链接或按钮,在点击超链接或按钮时会触发列的排序事件. 原由:点击超链接/按钮会触发排序的冒泡事件 解决方法:点击超链接/按钮时,阻 ...
- IOS ScrollView放大缩小点击位置并居中
项目中的一个优化案例,提升用户体验,对地铁线路图点击放大.缩小,并且点击位置居中: 正常ScrollView 我们点击某一点比如屏幕右侧,想要点的位置向左移动到中心位置,很简单只有算出该点位置距中心位 ...
- JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里
JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里 <!doctype html> <html manifest="lab4.manifest&q ...
- js 获取页面高度和宽度(兼容 ie firefox chrome),获取鼠标点击位置
<script> //得到页面高度 var yScroll = (document.documentElement.scrollHeight >document.documentEl ...
- win10 uwp 右击浮出窗在点击位置
本文主要让MenuFlyout出现在我们右击位置. 我们一般使用的MenuFlyout写在前台,写在Button里面,但是可能我们的MenuFlyout显示的位置和我们想要的不一样. 通过使用后台写S ...
- u3d 鼠标点击位置,物体移动过去。 U3d mouse clicks position, objects move past.
u3d 鼠标点击位置,物体移动过去. U3d mouse clicks position, objects move past. 作者:韩梦飞沙 Author:han_meng_fei_sha 邮箱: ...
- unity3d 让物体移动到点击位置
using UnityEngine; using System.Collections; public class test : MonoBehaviour { //在场景中鼠标点击地面后,角色可以移 ...
- vue组件通信,点击传值,动态传值(父传子,子传父)
转载:https://blog.csdn.net/xr510002594/article/details/83304141 一.父组件传子组件,核心--props 在这里触发 handleClick ...
- 每天一个JavaScript实例-铺货鼠标点击位置并将元素移动到该位置
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
随机推荐
- 抓住“新代码”的影子 —— 基于GoAhead系列网络摄像头多个漏洞分析
PDF 版本下载:抓住“新代码”的影子 —— 基于GoAhead系列网络摄像头多个漏洞分析 Author:知道创宇404实验室 Date:2017/03/19 一.漏洞背景 GoAhead作为世界上最 ...
- 《python解释器源码剖析》第4章--python中的list对象
4.0 序 python中的list对象,底层对应的则是PyListObject.如果你熟悉C++,那么会很容易和C++中的list联系起来.但实际上,这个C++中的list大相径庭,反而和STL中的 ...
- MySQL之concat、concat_ws、group_concat
concat(str1, str2, ...) 返回结果为连接一起的字符串. concat_ws(separator, str1, str2, ...) 同concat,但是可以指定连接符,sepa ...
- Python:pip 安装第三方库,速度很慢的解决办法
场景 想安装 Django 库 在 cmd 敲入命令 pip install Django 但是发现下载安装文件非常慢 原因:实质访问的下载网站是 https://pypi.Python.org/si ...
- swoole_process模拟耗时操作
一例串行阻塞操作 <?php $start = time(); $tasklists = [ '/root/文档/longtale1.txt', '/root/文档/longtale2.txt' ...
- mysql索引分类及实现原理
索引分类:主键索引.唯一索引.普通索引.全文索引.组合索引 1.主键索引:即主索引,根据主键pk_clolum(length)建立索引,不允许重复,不允许空值 ALTER TABLE 'table_n ...
- Shell登陆
Shell登录信息 注:只对本地终端起作用,远程终端不起作用(也就是说这个文件对远程登录是无效的). 修改后: 输出: 注:这里在配置文件中添加\l之后会显示终端(这里为终端1),按住Alt+F2可以 ...
- HGOI 20191029pm 题解
Promblem A 小学组 给出一个位运算操作符$\oplus \in \{or , and , xor\}$ ,和$n$个$m$维向量$a_i$,其中$a_{i,j} \in \{0,1\}$. ...
- Reborn & Recover
高考总算是结束了 而我们的旅程却还在继续 现在姑且是个ACMer(暂定) 而我已经将近一年没写代码了 接下来是全新的开始 全新的学校 全新的未来 总之从现在开始 试着努力看看吧!
- 一篇perfect描述“神秘”inf文件的文章[转]
INF Files for Bears of Little BrainMay 1, 2003Brian Catlin Copyright � 2003 by Brian Catlin. All rig ...