react元素获取e时，点击target为空的现象

2020-01-30 11:01:38 阅读：271 来源： 互联网

标签：console target 合成 react 事件为空 persist event

今天呢，学习react过程中，我要获取一个元素的e，

 1 　　checkAll=(e)=>{
 2         console.log(e)
 3         console.log(e.target)
 4     }
 5 
 6     render() {
 7         return (
 8             <div className="OneDemo">
 9                 选择<input type='checkbox' onClick={this.checkAll}/>
10             </div>
11         )
12     }

打印出来之后呢，点开里面的target，出现一个null，并抱了一条警告，是这个样子的：

把我吓坏了，不点不知道，一点吓一跳啊！但是打印e.target，是可以照常打印的：

脑子不够鸭，然后就上网查了一下，搜到了一段翻译：

出于性能原因，将重用此合成事件。如果您看到这一点，那么您正在访问已释放/取消的合成事件的属性“target”。设置为空。如果必须保留原始合成事件，请使用event.persist（）。有关更多信息，请参见https://fb.me/react-event-pooling

发现这并不是我代码的问题，然而这个问题是怎么造成的呢？

这是因为React里面的事件并不是真实的DOM事件，而是自己在原生DOM事件上封装的合成事件。
合成事件是由事件池来管理的，合成事件对象可能会被重用，合成事件的所有属性也会随之被清空。所以当在异步处理程序（如setTimeout等等）中或者浏览器控制台中去访问合成事件的属性，有可能就是空的。
上面的答案中给出的方案：event.persist()，其实就是将当前的合成事件从事件池中移除了，所以能够继续保有对该事件的引用以及仍然能访问该事件的属性。

是不是很神奇！

警告中告诉我们需要使用一个persist()方法来解决获取e的这个问题，使用方法如下：

function(e){
          e.persist()
          console.log(e);
        }

标签：console,target,合成,react,事件,为空,persist,event
来源： https://www.cnblogs.com/GGbondLearn/p/12242261.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

react元素获取e时，点击target为空的现象