react判断点击位置是否为组件内,实现点击外部触发组件内事件

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});}  }

 

转载于:https://www.cnblogs.com/ives/p/11291769.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/569024.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

详述白盒测试的逻辑覆盖法的条件判定覆盖及其优缺点

条件判定覆盖的定义&#xff1a; 设计足够多的测试用例&#xff0c;使被测程序中每个判定的每个条件的所有可能取值&#xff08;真假&#xff09;至少执行一次&#xff0c;并且每个判定的所有可能&#xff08;真假&#xff09;分支也至少执行一次 。通俗来讲&#xff0c;就是条…

Cisco 4507R+E四引擎VSS故障解决

如果可以要做双引擎VSS(每个机箱1个引擎), 3.6.7版本可以实现 如果需要做4引擎VSS(每个机箱2个引擎) 请使用3.8.x和之后的版本. 转载于:https://www.cnblogs.com/networking/p/8678009.html

利用可视化软件navicat对mysql进行语句查询的使用(增删改查)

https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注&#xff01; 欢迎关注微信公众号&#xff1a;宝藏女孩的成长日记 如有转载&#xff0c;请注明出处&#xff08;如不注明&#xff0c;盗者必究&#xff09; 增&#xff1a;insert 语法&#xff1a;INSERT [INTO] 表…

C# 3.0入门系列(三)

从本节开始&#xff0c;笔者将会和大家一起开始体验dlinq了。前面我们准备了数据库&#xff0c;也对数据库之间的关系做了初步的了解。有了数据库之后&#xff0c;数据和对象是一个什么样的关系呢&#xff1f;从dlinq的设计来看&#xff0c;它主要是为了解决data!objects 的问题…

(Navicat for MySQL)利用可视化软件navicat操作mysql,创建一个表举例(基础)

https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注&#xff01; 欢迎关注微信公众号&#xff1a;宝藏女孩的成长日记 如有转载&#xff0c;请注明出处&#xff08;如不注明&#xff0c;盗者必究&#xff09; 步骤&#xff1a; 首先我们打开navicat:先点击下图中的表…

eclipse中egit插件使用

这篇文章当时制作有点粗糙&#xff0c;建议阅读升级版&#xff1a;eclipse中egit插件使用--升级版 使用git作为项目的代码管理工具现在是越来越火&#xff0c;网上有各种各样的文章、博客、讨论&#xff0c;其中以命令行居多。使用eclipse作为开发工具的人也是很多&#xff0c;…

大型项目之一云多端

以下纯属个人意淫&#xff1a; 随着各种小程序的出现,前端开发面临一个问题,就是同一个项目需要在不同的小程序展示,甚至还有h5版 pc web版,如果真对不同的端编写同样一套代码,显然是多余的&#xff0c;这有点像app的发展过程,自从ios和安卓出现之后,人们就从来没有放弃过使用一…

以VMware workstation15.5.2pro为例如何新建虚拟机,安装镜像文件(最新)

需要用到VMware软件与镜像文件:链接:https://blog.csdn.net/hanhanwanghaha/article/details/105674470 第一步:打开VMware,点击创建新的虚拟机 第二步:选择典型,点击下一步 第三步:选择安装程序光盘镜像文件,并且下面提示已经检测到,再点击下一步

续--Flask, Django - 区别

1. 目录结构 参考&#xff1a;https://blog.csdn.net/yang9520/article/details/79740374 中文文档&#xff08;http://docs.jinkan.org/docs/flask/&#xff09;一般情况下&#xff0c;Django很系统、统一。Flask项目目录风格不同一&#xff0c;即使用上了蓝图。 2…

VMware workstation 15.5.2及镜像文件下载

链接: https://pan.baidu.com/s/175imV_FeTFcitFHay07vHQ 提取码: ayh3 希望对大家有用&#xff01; https://blog.csdn.net/hanhanwanghaha一个超级无敌可爱的人鸭 欢迎您的关注&#xff01; 欢迎关注微信公众号&#xff1a;宝藏女孩的成长日记 如有转载&#xff0c;请注明出…

matplotlib setting zh-hans

1 from matplotlib import pyplot as plt2 from matplotlib import font_manager3 4 import random5 #                             you font famaily location6 font_pro font_manager.FontProperties(fnameC:\Windows\Fonts\SIMYOU.TTF)7 8 9 …

无法连接虚拟设备 floppy0,因为主机上没有相应的设备。 您要在每次开启此虚拟机时都尝试连接此虚拟设备吗?

如果出现以上情况&#xff0c;应该是没有连接镜像文件&#xff0c;在添加镜像文件的地方添加镜像文件就可以了 https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注&#xff01; 欢迎关注微信公众号&#xff1a;宝藏女孩的成长日记 如有转载&#xff0c;请注明出处&…

CentOS 6.5 下安装 Kibana5

1. 导入Elastic PGP Key 执行命令 rpm --import https://artifacts.elastic.co/GPG-KEY-elasticsearch 2. 安装Kibana的rpm库使用 ll /etc/yum.repos.d/ 查看当前机器上已经安装的rpm库&#xff0c;如果没有Kibana的话需要创建。用vim创建新的repo文件&#xff0c;vim /etc/yu…

详述白盒测试的逻辑覆盖法的条件组合覆盖及其优缺点

概念&#xff1a; 设计足够多的测试用例&#xff0c;使被测程序中每个判定的所有可能的条件取值组合至少执行一次。 https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注&#xff01; 欢迎关注微信公众号&#xff1a;宝藏女孩的成长日记 如有转载&#xff0c;请注明出…

Windows脚本编码器算法分析与破译

Windows脚本编码器算法分析与破译 作者&#xff1a;lake2 大家对脚本一定很熟悉吧&#xff0c;呵呵&#xff0c;脚本编写简单无需编译所以非常方便。不过&#xff0c;脚本的一个缺点是它不能保护脚本的内容&#xff0c;因为随便谁拿到一个脚本程序都可以用记事本打开来看内容。…

详述白盒测试的逻辑覆盖的路径覆盖及其优缺点

详述白盒测试的逻辑覆盖的路径覆盖及其优缺点定义&#xff1a;与其他覆盖的关系&#xff1a;路径覆盖率&#xff1a;测试用例&#xff1a;优缺点&#xff1a;定义&#xff1a; https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注&#xff01; 欢迎关注微信公众号&…

第十届机器学习及其应用研讨会 MLA’2012 Slides

第十届机器学习及其应用研讨会 MLA’2012 Slides On Learning Sparse Structured Input-Output Models [PDF], Prof. Eric Xing &#xff08;卡内基梅隆大学, 美国&#xff09; Learning with Implicit/Explicit Structures [PDF], Prof. James Kwok&#xff08;香港科技大学&…

Jmeter下载安装详细步骤(最新)

https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注&#xff01; 欢迎关注微信公众号&#xff1a;宝藏女孩的成长日记 如有转载&#xff0c;请注明出处&#xff08;如不注明&#xff0c;盗者必究&#xff09; 官网地址 http://jmeter.apache.org/ 步骤 1.点击Downl…

Repeater嵌套Repeater获取父级绑定项

<%#DataBinder.Eval((Container.NamingContainer.NamingContainer as RepeaterItem).DataItem,"Comm_ID") %>转载于:https://www.cnblogs.com/linlin/archive/2011/01/20/1939930.html

怎样使用navicat将mysql的数据表导出保存(转储SQL文件)

https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注&#xff01; 欢迎关注微信公众号&#xff1a;宝藏女孩的成长日记 如有转载&#xff0c;请注明出处&#xff08;如不注明&#xff0c;盗者必究&#xff09; 1.点击你所创建的表&#xff0c; 2.右键点击转储SQL文件&…