1.导入

import {findDOMNode} from 'react-dom'

2.绑定ref

<div  ref="refTest"
</div>
3.绑定监听事件
//监听外部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
});
}
}

强制重新渲染

this.forceUpdate();

react判断点击位置是否为组件内,实现点击外部触发组件内事件的更多相关文章

  1. jqgrid 点击列头的超链接或按钮时,不触发列排序事件

    接上篇文章:jqgrid 将列头设置为超链接或按钮 如果在列头设置了超链接或按钮,在点击超链接或按钮时会触发列的排序事件. 原由:点击超链接/按钮会触发排序的冒泡事件 解决方法:点击超链接/按钮时,阻 ...

  2. IOS ScrollView放大缩小点击位置并居中

    项目中的一个优化案例,提升用户体验,对地铁线路图点击放大.缩小,并且点击位置居中: 正常ScrollView 我们点击某一点比如屏幕右侧,想要点的位置向左移动到中心位置,很简单只有算出该点位置距中心位 ...

  3. JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里

    JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里 <!doctype html> <html manifest="lab4.manifest&q ...

  4. js 获取页面高度和宽度(兼容 ie firefox chrome),获取鼠标点击位置

    <script> //得到页面高度 var yScroll = (document.documentElement.scrollHeight >document.documentEl ...

  5. win10 uwp 右击浮出窗在点击位置

    本文主要让MenuFlyout出现在我们右击位置. 我们一般使用的MenuFlyout写在前台,写在Button里面,但是可能我们的MenuFlyout显示的位置和我们想要的不一样. 通过使用后台写S ...

  6. u3d 鼠标点击位置,物体移动过去。 U3d mouse clicks position, objects move past.

    u3d 鼠标点击位置,物体移动过去. U3d mouse clicks position, objects move past. 作者:韩梦飞沙 Author:han_meng_fei_sha 邮箱: ...

  7. unity3d 让物体移动到点击位置

    using UnityEngine; using System.Collections; public class test : MonoBehaviour { //在场景中鼠标点击地面后,角色可以移 ...

  8. vue组件通信,点击传值,动态传值(父传子,子传父)

    转载:https://blog.csdn.net/xr510002594/article/details/83304141 一.父组件传子组件,核心--props 在这里触发 handleClick ...

  9. 每天一个JavaScript实例-铺货鼠标点击位置并将元素移动到该位置

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. 抓住“新代码”的影子 —— 基于GoAhead系列网络摄像头多个漏洞分析

    PDF 版本下载:抓住“新代码”的影子 —— 基于GoAhead系列网络摄像头多个漏洞分析 Author:知道创宇404实验室 Date:2017/03/19 一.漏洞背景 GoAhead作为世界上最 ...

  2. 《python解释器源码剖析》第4章--python中的list对象

    4.0 序 python中的list对象,底层对应的则是PyListObject.如果你熟悉C++,那么会很容易和C++中的list联系起来.但实际上,这个C++中的list大相径庭,反而和STL中的 ...

  3. MySQL之concat、concat_ws、group_concat

    concat(str1, str2, ...)  返回结果为连接一起的字符串. concat_ws(separator, str1, str2, ...) 同concat,但是可以指定连接符,sepa ...

  4. Python:pip 安装第三方库,速度很慢的解决办法

    场景 想安装 Django 库 在 cmd 敲入命令 pip install Django 但是发现下载安装文件非常慢 原因:实质访问的下载网站是 https://pypi.Python.org/si ...

  5. swoole_process模拟耗时操作

    一例串行阻塞操作 <?php $start = time(); $tasklists = [ '/root/文档/longtale1.txt', '/root/文档/longtale2.txt' ...

  6. mysql索引分类及实现原理

    索引分类:主键索引.唯一索引.普通索引.全文索引.组合索引 1.主键索引:即主索引,根据主键pk_clolum(length)建立索引,不允许重复,不允许空值 ALTER TABLE 'table_n ...

  7. Shell登陆

    Shell登录信息 注:只对本地终端起作用,远程终端不起作用(也就是说这个文件对远程登录是无效的). 修改后: 输出: 注:这里在配置文件中添加\l之后会显示终端(这里为终端1),按住Alt+F2可以 ...

  8. HGOI 20191029pm 题解

    Promblem A 小学组 给出一个位运算操作符$\oplus \in \{or , and , xor\}$ ,和$n$个$m$维向量$a_i$,其中$a_{i,j} \in \{0,1\}$. ...

  9. Reborn & Recover

    高考总算是结束了 而我们的旅程却还在继续 现在姑且是个ACMer(暂定) 而我已经将近一年没写代码了 接下来是全新的开始 全新的学校 全新的未来 总之从现在开始 试着努力看看吧!

  10. 一篇perfect描述“神秘”inf文件的文章[转]

    INF Files for Bears of Little BrainMay 1, 2003Brian Catlin Copyright � 2003 by Brian Catlin. All rig ...