react判断点击位置是否为组件内,实现点击外部触发组件内事件
1.导入
2.绑定ref
<div ref="refTest"
</div>
//监听外部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
});
}
}
强制重新渲染
react判断点击位置是否为组件内,实现点击外部触发组件内事件的更多相关文章
- jqgrid 点击列头的超链接或按钮时,不触发列排序事件
接上篇文章:jqgrid 将列头设置为超链接或按钮 如果在列头设置了超链接或按钮,在点击超链接或按钮时会触发列的排序事件. 原由:点击超链接/按钮会触发排序的冒泡事件 解决方法:点击超链接/按钮时,阻 ...
- IOS ScrollView放大缩小点击位置并居中
项目中的一个优化案例,提升用户体验,对地铁线路图点击放大.缩小,并且点击位置居中: 正常ScrollView 我们点击某一点比如屏幕右侧,想要点的位置向左移动到中心位置,很简单只有算出该点位置距中心位 ...
- JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里
JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里 <!doctype html> <html manifest="lab4.manifest&q ...
- js 获取页面高度和宽度(兼容 ie firefox chrome),获取鼠标点击位置
<script> //得到页面高度 var yScroll = (document.documentElement.scrollHeight >document.documentEl ...
- win10 uwp 右击浮出窗在点击位置
本文主要让MenuFlyout出现在我们右击位置. 我们一般使用的MenuFlyout写在前台,写在Button里面,但是可能我们的MenuFlyout显示的位置和我们想要的不一样. 通过使用后台写S ...
- u3d 鼠标点击位置,物体移动过去。 U3d mouse clicks position, objects move past.
u3d 鼠标点击位置,物体移动过去. U3d mouse clicks position, objects move past. 作者:韩梦飞沙 Author:han_meng_fei_sha 邮箱: ...
- unity3d 让物体移动到点击位置
using UnityEngine; using System.Collections; public class test : MonoBehaviour { //在场景中鼠标点击地面后,角色可以移 ...
- vue组件通信,点击传值,动态传值(父传子,子传父)
转载:https://blog.csdn.net/xr510002594/article/details/83304141 一.父组件传子组件,核心--props 在这里触发 handleClick ...
- 每天一个JavaScript实例-铺货鼠标点击位置并将元素移动到该位置
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
随机推荐
- Linux 下幾種網芳/Samba 目錄的 mount 方式
Linux 下幾種網芳/Samba 目錄的 mount 方式,比較新的 Smaba 只能用 cifs 的 mount 方式. [smbmount] smbmount -o username=&qu ...
- Bridge的数据在内核处理流程
转:http://blog.sina.com.cn/s/blog_67cc0c8f0101oh33.html 转载一篇Bridge的数据在内核处理流程,文章写的不错啊! (2013-07-05 16: ...
- thinkphp5 二维码生成 composer
进入extend文件夹 composer require endroid/qrcode 2.将二维码生成封装为服务 QrcodeServer.php代码如下: <?php /** * Creat ...
- TP5通用化API接口数据封装
之前在做项目的时候,特别是最近总是再使用前后端分离模式,向客户端提供接口,每次都傻不拉几的 在每一个方法里面 写 $data = ['status'=>1,'message'=>'XXX' ...
- linux syslog支持 ubuntu
linux syslog支持 linux syslog支持 linux syslog支持 ??????? https://wenku.baidu.com/view/8cc6b50a0202074 ...
- VMware 虚拟机下载与安装
虚拟机下载 VMware官网地址:https://www.vmware.com/ 进行官网后,点击左边的下载图标,然后 根据操作系统选择合适的产品,在这里以Windows系统为例,点击转至下载,如下图 ...
- docker使用 Flannel(etcd+flannel)网络
一.Flannel网络简介 Flannel是一种基于overlay网络的跨主机容器网络解决方案,也就是将TCP数据包封装在另一种网络包里面进行路由转发和通信,Flannel是CoreOS开发,专门用于 ...
- Spring 初探(二) AOP 图集
Spring AOP属于第二代AOP.采用Java作为AOP的实现语言(AOL),采用动态代理机制和字节码生成技术实现. 代理设计模式 ISubject 对被访问者或者被访问资源的抽象,某些场景下不使 ...
- Linux下nc或scp命令来实现文件传输
很实用的小技巧, 可以使用nc或者是scp nc命令,转载自:https://www.cnblogs.com/xuybin/archive/2013/09/27/3343098.html 发送端:ca ...
- jquery live()方法 语法
jquery live()方法 语法 作用:live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数.通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及 ...