react元素獲取e時，點擊target為空的現象

今天呢，學習react過程中，我要獲取一個元素的e，

　　checkAll=(e)=>{
        console.log(e)
        console.log(e.target)
    }

    render() {
        return (
            <div className="OneDemo">
                選擇<input type='checkbox' onClick={this.checkAll}/>
            </div>
        )
    }

 

打印出來之后呢，點開里面的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);
        }