需求:点击导航list按钮出现侧弹框,点击空白处弹框消失

问题:绑定空白处的点击事件到document上,但是非空白处的点击也会触发这个点击事件,在react中如何阻止事件冒泡?

解决方法:e.stopPropagation()并不奏效,react有专属的阻止事件冒泡方法,e.nativeEvent.stopImmediatePropagation()

示例:

/**
* Created by sunzhuoyi on 17/3/6.
*/
import React from 'react';
import {connect} from 'react-redux';
import {autobind} from 'core-decorators';
import {pushState} from 'redux-router';
import Store from '@comynli/store';
import {Menu, Icon, Row, Col, Dropdown, Button, Affix} from 'antd'; @connect(state => ({}),{pushState}) export default class Common extends React.Component {
constructor(props){
super(props);
this.state = {
current:'index',
barDisplay:true
}
} componentDidMount(){
document.onclick=this.handleBarDisplayShow;
} @autobind
handleClick(e) {
this.setState({
current: e.key,
});
} @autobind
handleInLineClick(e) {
this.setState({
current: e.key,
});
} @autobind
handleBarDisplay(e){
e.nativeEvent.stopImmediatePropagation();
this.setState({barDisplay:false})
} @autobind
handleBarDisplayShow(){
e.nativeEvent.stopImmediatePropagation();
this.setState({barDisplay:true})
} render() {
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
return(
<div style={{width:'100%'}}>
<Affix>
<Menu onClick={this.handleClick}
mode="horizontal"
style={{lineHeight:'60px',paddingLeft:'20px'}}
>
{
this.state.barDisplay === true ? <Menu.Item key="bars" >
<Icon type="bars" onClick={e => this.handleBarDisplay(e)}/>
</Menu.Item> : <span></span>
}
<Menu.Item key="Poseidon">
<a href="/"><b>Poseidon</b></a>
</Menu.Item>
</Menu>
</Affix>
{
this.state.barDisplay === false ?
<Menu onClick={this.handleInLineClick}
style={{width: 240, paddingLeft: '20px', height: '1500px'}}
mode="inline"
>
<Menu.Item key="Project">
<a href="/">Project</a>
</Menu.Item>
<Menu.Item key="ProjectTwo">
<a href="/">Project</a>
</Menu> : <span></span>
} </div>
)
}
}

React阻止事件冒泡的正确打开方式的更多相关文章

  1. react 阻止事件冒泡

    前言 在学习react阻止事件冒泡,需要先了解 合成事件 和 原生事件 合成事件:在jsx中直接绑定的事件,就是合成事件: 原生事件: 通过js原生代码绑定的事件,就是原生事件: react事件:re ...

  2. jquery阻止事件冒泡的3种方式

    第一种:return false, 缺点:直接返回了函数,函数后面的语句没法执行了: $('.btn').on('click',function(event){ do something ... re ...

  3. JQuery中阻止事件冒泡的两种方式及其区别

    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...

  4. 深入React事件系统(React点击空白部分隐藏弹出层;React阻止事件冒泡失效)

    只关注括号内问题的同学,可直接跳转到蓝字部分.(标题起的有点大,其实只讨论一个问题) 两个在React组件上绑定的事件,产生冲突后,使用e.stopPropagation(),阻止冒泡,即可防止事件冲 ...

  5. React 中阻止事件冒泡的问题

    在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达 ...

  6. 阻止事件冒泡两种方式:event.stopPropagation();和return false;

    jQuery提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function (event) { ...

  7. JQuery中阻止事件冒泡方式及其区别

    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation();         $("#div1").mousedown(function( ...

  8. JQuery 提供了两种方式来阻止事件冒泡。

    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...

  9. JS如果阻止事件冒泡和浏览器默认事件

    原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...

随机推荐

  1. 安卓开发笔记①:利用高德地图API进行定位、开发电子围栏、天气预报、轨迹记录、搜索周边(位置)

    高德地图开发时需要导入的包在下面的网盘链接中:(由于高德地图api更新得太快,官网上最新的包使用起来没有之前的方便,所以以下提供最全面的原始包) 链接:http://pan.baidu.com/s/1 ...

  2. 使用 ActiveMQ 实现JMS 异步调用

    目录 简介 启动 ActiveMQ 服务器 查看控制台 ActiveMQ 的消息通道 Queue Topic 比较 开发生产者和消费者 开发服务端(消费者) 开发客户端(生产者) 参考 简介 服务之间 ...

  3. JS 模块 p6

    利用了闭包的模块: 简单模块例子: function fn(){ ; function y(){ console.log(x); } return { y:y} }var do1 = fn() do1 ...

  4. PDO中的事务处理

    基本原理和步骤其实都是一样的(可参看上一篇“MySQL的事务处理”),PDO中的事务处理就是调用PDO对象的三个方法: 开启事务:beginTransaction 回滚操作:rollBack 执行操作 ...

  5. 【代码笔记】iOS-只让textField使用键盘通知

    代码: #import "ViewController.h" @interface ViewController () @end @implementation ViewContr ...

  6. spring 3.2.2后springjdbc中不用queryforInt了

    今天才发现,原来spring 3.2.2之后,jdbctemplate中的queryForInt已经被取消了! 参考博客:http://jackyrong.iteye.com/blog/2086255

  7. (转)预处器的对比——Sass、LESS和Stylus

    英文原文:http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-sho ...

  8. js的style.display小问题

    在元素添加class样式隐藏display:none; 使用console.log(xx.style.display);//空值

  9. Dynamics 365Online Server-Side OAuth身份认证

    在上篇演示了在html页面中通过调用online的OAuth身份验证后再通过web api取10条客户数据并展示,本篇继续讲述如何在server-side程序中调用online的OAuth认证再通过w ...

  10. ActiveReports 报表应用教程 (16)---报表导出

    葡萄城ActiveReports报表支持多种格式的报表导出,包括PDF.Excel.Word.RTF.HTML.Text.TIFF以及其它图片格式,用户可以将它们应用到Windows Forms.We ...