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. remote mounting from windows to linux

    8 Ways To Mount SMBfs (SAMBA FILE SYSTEM) In Linux. Sep 8, 2009 How to Mount smbfs (SAMBA file syste ...

  2. javascript 元编程之-代码修改代码

    javascript 元编程之-代码修改代码 引言 重构代码是个体力活,特别是在确定重构方案后,剩下就是按方案调整代码,然后进行测试. 如何有好又快的调整到位代码,这是件不容易的事. 简单的代码,可以 ...

  3. Java ==和equals的区别

    首先了解默认equals方法实现代码 public boolean equals(Object obj) { return (this == obj); } 1.== (1)对于基本数据类型的变量,& ...

  4. jdk提供的线程协调API suspend/resume wait/notify park/unpark

    线程通信(如 线程执行先后顺序,获取某个线程执行的结果等)有多种方式: 文件共享 线程1 --写入--> 文件 < --读取-- 线程2 网络共享 变量共享 线程1 --写入--> ...

  5. java线程基础巩固---多线程与JVM内存结构的关系及Thread构造函数StackSize的理解

    继续学习一下Thread的构造函数,在上次[http://www.cnblogs.com/webor2006/p/7760422.html]已经对如下构造都已经学习过了: 多线程与JVM内存结构的关系 ...

  6. Springboot定时任务实现动态配置Cron参数(从外部数据库获取)

    https://blog.csdn.net/qq_35992900/article/details/80429245 我们主要讲解它的动态配置使用方法. 在刚开始使用的时候,我们更改一个任务的执行时间 ...

  7. 清除Tomcat缓存

        删除tomcat目录下的缓存文件分别位于:                   tomcat/work                 tomcat/temp                  ...

  8. word文档在线预览地址

    文档网址 http://www.officeweb365.com/Default/Docview 对接 http://ow365.cn/?i=19604&furl=http:://www.ba ...

  9. k8s集群管理注意要点【持续更新】

    1.编写pod yaml文件时绑定调度标签,必须要给指定节点绑定标签,否则无法调度到指定节点上,报错: Events: Type Reason Age From Message ---- ------ ...

  10. Java当中的集合框架

    Java当中的集合框架 01 在我们班里有50位同学,就有50位对象. // 简书作者:达叔小生 Student[] stus = new Student[20]; 结果来了一位插班生,该同学因为觉得 ...