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. 1.Bacula各组件说明

    1.  Bacula各组件说明 Baula有三个服务,分别是bacula-sd用于管理storage.bacula-fd为bacula客户端.bacula-dir为bacula的核心组件机direct ...

  2. vue中 localStorage的使用方法(详解)

    vue中实现本地储存的方法:localStorage,在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cooki ...

  3. altium designer 鼠线

    第一: 按“L”进入View Configurations 要确保Default Color for New Nets是勾上的. 第二: 如果“PCB”的下拉列表处于“From-To Editor”状 ...

  4. Tomcat7设置环境变量供java代码读取

    前两天要做一个后台线程分片处理任务功能,把应用放在tomcat中部署在多个服务器上,每个服务器分片处理一些任务,这里需要在java代码中获取到tomcat的信息和服务器信息.在网上找了好久,终于找到了 ...

  5. sql like 拼接字符串模糊查询

    这种分割的值大家常用,如果要用like 来查询包含2,这个值的数据有哪些,这个怎么查? like '%2%'  ????,这是不行的如果是 44,125,687 同样可以查出来,那么就想到通配符, l ...

  6. oracle学习1 基于oracle数据库的PLSQL编程以及存储过程的创建和使用视频

    https://www.bilibili.com/video/av46777605 plsql中选择testWindow中可以进行测试 1.编写函数在plsql的testwindow中 begin d ...

  7. ACwing 196. 质数距离

    #include <bits/stdc++.h> using namespace std; , M = ; int v[M]; long long prime[N],prim[N]; ; ...

  8. 数据库——Oracle(4)

    1 Oracle中常用字符处理函数:用来处理char,varchar以及varchar2类型数据. 1)length(列名/字符串):统计当前该列的列值/字符串中字符的个数 select ename, ...

  9. Java高级技术点面试问题-IO相关面试问题

    java网络编译: 基础知识:①.ip地址和端口号:ip地址是用来识别网络中的一个实体,而这个实体可以理解为一个主机,而端口号则是用来区分具体的通讯程序的.②.tcp / udp协议:tcp是一个可靠 ...

  10. unittest 报告——HTMLTestRunner/BSTestRunner+代码覆盖率

    1. HTMLTestRunner.py 代码(python3)如下: python2:  https://github.com/tungwaiyip/HTMLTestRunner "&qu ...