今天呢学习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 <https://p.download-x.com/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); }
相关文章
猜您喜欢
- 01-30泛型的深入研究——面试时说出能加分
- 01-30influxdb基础那些事儿
- 01-30C++ lambda 分析
- 01-30JUC中的原子操作类及其原理
- 01-30【Java并发基础】Java线程的生命周期
- 01-30c++ 文件的简单操作