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. export命令用来设置环境变量。

    sh-# export export CONSOLE="/dev/console" export HOME="/" export LD_LIBRARY_PATH ...

  2. 蓝牙App漏洞系列分析之二CVE-2017-0639

    蓝牙App漏洞系列分析之二CVE-2017-0639 0x01 漏洞简介 Android本月的安全公告,修复了我们发现的另一个蓝牙App信息泄露漏洞,该漏洞允许攻击者获取 bluetooth用户所拥有 ...

  3. 复制SD启动卡 生成新启动卡

    在已经有1张SD卡启动卡的情况下,如何复制出一张新卡: 1. 使用软件DiskGenius4.8.0->硬盘->备份分区表 备份 源sd卡分区信息 2. 使用软件DiskGenius4.8 ...

  4. Selenium(3)

    练习1:Ecshop 录制登录后退出业务 打开系统 存储页面的标题 a.点击"登录"按钮 b.输入用户名:testing 存储输入的用户名 c.输入密码:123456 d.点击&q ...

  5. QTP(8)

    一.Action 1.调用Action C:\Program Files\HP\QuickTest Professional\CodeSamplesPlus\Flight_Samples (1)调用A ...

  6. Hdu 1517 巴什博奕变形

    易知2-9为先手胜 继续递推下去 10-18 后手胜 再推发现19-162先手胜 即发现有9(9) 18(2*9) 162(9*2*9)..... #include<bits/stdc++.h& ...

  7. DebuggerStepThrough特性(c#)

    单步调试程序时,有一些属性和方法不想进入,可以使用DebuggerStepThrough特性 (1)属性 private string word; public string Word { [Syst ...

  8. LeetCode 69 x 的平方根

    链接:https://leetcode-cn.com/problems/sqrtx 实现 int sqrt(int x) 函数. 计算并返回 x 的平方根,其中 x 是非负整数. 由于返回类型是整数, ...

  9. CA认证和证书

    一些概念: PKI:Public Key Infrastructure 签证机构:CA(Certificate Authority) 注册机构:RA(Register Authority) 证书吊销列 ...

  10. openssh的服务端配置文件

    一.因为部分配置长时间不使用就忘了,为了方便查阅,我在这里检点写一些比较有用的ssh配置选项. PortListenAddress ip       #监听自己的哪个端口,默认是都监听的,如果指定了I ...