1.导入

import {findDOMNode} from 'react-dom'

2.绑定ref

  1. <div ref="refTest"
  2. </div>
3.绑定监听事件
  1. //监听外部click
  2. componentDidMount() {
  3. document.addEventListener('mousedown', (e)=>this.handleClickOutside(e), false);
  4. }
  5. componentWillUnmount() {
  6. document.removeEventListener('mousedown', (e)=>this.handleClickOutside(e), false);
  7. }
  8. handleClickOutside(e) {
  9. const target = e.target;
  10. console.log(target);
  11. console.log(this);
  12. // 组件已挂载且事件触发对象不在div内
  13. let result=findDOMNode(this.refs.refTest).contains(e.target);
  14. if( !result) {
  15. console.log("ssscs");
  16. this.setState({
  17. ulShow:false
  18. });
  19. }
  20. }

强制重新渲染

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. qunee 流动的关系

    <!DOCTYPE html> <html> <head> <title>Hello Qunee for HTML5</title> < ...

  2. FLUSH TABLES WITH READ LOCK 获取锁的速度

    最近有一台MySQL的从库老是报延迟,观察到:FLUSH TABLES WITH READ LOCK,阻塞了4个多小时,还有另外一条SQL语句select *,从现象上来看是select * 阻塞了f ...

  3. Android及java中list循环添加时覆盖的问题-20171021

    鉴于新浪博客太渣,转到这来. 最近在工程设计时,使用list循环添加map对象发现,最终全部变为最后一个map的值,但是list的数值还是正确的,也就是说添加了N(list长度或者说循环的次数)个相同 ...

  4. BZOJ 2243: [SDOI2011]染色 (树剖+线段树)

    树链剖分后两个区间合并的时候就判一下相交颜色是否相同来算颜色段数就行了. CODE #include <vector> #include <queue> #include &l ...

  5. 1 FBV与CBV,前后端分离(初识),postman

    yuan的Blog:https://www.cnblogs.com/yuanchenqi/articles/8715364.html alice的Blog:https://www.cnblogs.co ...

  6. typescript枚举字符串型不能使用函数问题

    数字型枚举 enum OrderStatus { Start = 1, Unpaid, Shipping, Shipped, Complete } 或者 enum OrderStatus { Star ...

  7. Python—数据类型之字典(Dict)

    其它数据类型转成字典 arr1 = ['jack', 'rose', 'marry'] arr2 = [68, 85, 66] dict1 = dict(zip(arr1, arr2)) print( ...

  8. jmeter+jenkins+git+ant

    摘自:https://www.cnblogs.com/syw20170419/p/10732167.html 使用场景: 多人协作,共同完成脚本的编写,脚本之间进行合并后,用远程构建运行脚本.做接口的 ...

  9. maven工程的简单构建

    1.按maven约定的目录结构创建文件夹 约定目录结构:不按约定的目录来建maven无法正常工作:         Hello         |---src         |---|---main ...

  10. html上标与下标应用

    HTML 标签应用示例: <html> <head> <meta http-equiv="Content-Type" content="te ...