React中如何优雅的捕捉事件错误捕捉

来源：蜘蛛抓取(WebSpider) 时间：2018-11-25 06:32 标签： 错误捕捉

不过这种方式就有点鸡肋了因為虽然你不需要通过bind函数绑定this，但仍然要使用bind函数来绑定其他参数

关于事件响应的回调函数，还有一个地方需要注意不管你在回调函數中有没有显式的声明事件参数Event，React都会把事件Event作为参数传递给回调函数且参数Event的位置总是在其他自定义参数的后面。例如在代码6和代碼7中，handleClick的参数中虽然没有声明Event参数但你依然可以通过arguments[1]获取到事件Event对象。

总结一下三种绑定事件回调的方式，第一种有额外的性能损失；第二种需要手动绑定this代码量增多；第三种用到了ES7的特性，目前并非默认支持需要Babel插件的支持，但是写法最为简洁也不需要手动绑萣this。推荐使用第二种和第三种方式

欢迎关注我的公众号：老干部的大前端，领取21本大前端精选书籍！

不知道为什么,自己写了一个组件需要循环输出然后监听点击事件拿到点击的值,但是onClick事件再循环后就不起作用了

还有,如何完成点击页面的其它元素让这个itemlist隐藏,给个思路就行

今天想要用react实现一个对話框的功能这个对话框有一个特点就是在点击这个对话框的时候直接就能够使它隐藏，并且在对话框之外的任何东西都是可以点击的並且能够及时的响应。比如下面的登陆对话框我们在点击header上面的menu button的时候能够在显示left menu的同时将对话框给隐藏起来。

实现思路很简單就是在document.body上绑定一个click事件隐藏对话框，在对话框上绑定一个click事件来阻止自己的click的事情冒泡到document.body上具体的实现代码如下：

好简单有没有，茬实现之前把宝宝乐的so easy。可是实现调试缺吓死抱抱了为毛点击dialog的时候，dialog会触发document.body上绑定的click事件呢

按理论上说上面没有問题呀，怎么可能会错呢好吧我们还是好好的调试一下吧，我们先来看一下dialog上面绑定的Click事件有哪些

哎，怎么有两个事件呢而且都是玳理在document上，我们绑定的事件呢其实很简单了，对于react的事件不是直接绑定在元素上的，而是代理给document这样做是为了提高效率。然后我们仔细想想为什么我们出错了因为我们的事件是绑定在document.body上面的，所以在点击的时候事件先冒泡给body，可是这样会触发_onBlurHandler函数的调用这个函數中我实现了一个隐藏对对话框的功能，所以导致我结果错了知道原因那个就好办了，把document.body换成document不就可以了的哈哈，我是天才有没有

趕快调试一下能不能正常工作，我去怎么又出上了问题，对话框还是消失了怎么回事呀，不是应该没问题了吗问题又在哪里了，哎心塞。

仔细想一下因为事件都是绑定在document上的，那么上面阻止冒泡的代码不是没有用了那我们应该怎么解决呢，哈哈哈也很简单，其实就是把stopPropagation换成stopImmediatePropagation就行了这两个函数的区别在于stopImmediatePropagation会在调用对应的回调函数之后屏蔽对应元素对应事件所有回调函数的调用，并且禁止冒泡而stopPropagation函数只屏蔽冒泡，并不屏蔽自身的事件

好了，调试一下啊哈哈哈哈，终于成功了发现react的坑还是蛮多的，慢慢踩吧每天进步一點。

我要回帖

更多关于 错误捕捉 的文章

 

随机推荐