zoukankan      html  css  js  c++  java
  • react元素获取e时,点击target为空的现象

    今天呢,学习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);
            }
     
  • 相关阅读:
    quagga源码学习--BGP协议的初始化
    Golang pprof heap profile is empty
    python requests 配置超时及重试次数
    SVN: bdb: BDB1538 Program version 5.3 doesn't match environment version 4.7
    OpenSSL Command-Line HOWTO
    树莓派保卫战--防止SSH暴力破解
    Mac OS X Tips
    Git Tips
    SQL分组多列统计(GROUP BY后按条件分列统计)
    Show Linux Package Sort By Size
  • 原文地址:https://www.cnblogs.com/GGbondLearn/p/12242261.html
Copyright © 2011-2022 走看看