React開發 獲取不到當前觸發事件的元素

應用場景：一組列表，需獲取當前觸發 onClick 事件元素上的 data-key ；

就一個事件冒泡致使的問題；
初步沒解決方案是給 li 下的全部子元素都加上 data-key
顯然這是很很很笨的方法，僅爲當時測試用。

實在不行，其餘地方也要解決這個問題
就停下腳步

得深挖下，事件捕捉/冒泡的過程（有空補全）

既然是子元素冒泡上來了，就得去子元素下阻止冒泡
想了5秒，子元素下要有100個元素且不是。。。。。

到這裏就要另外辦法了，看下面的代碼：

handleMsglistStar(e){
    console.log(e.currentTarget);  //拿到當前觸發 onClick事件的元素      
    e.stopPropagation();
    e.preventDefault();
}

跑一遍，仍是不行。。。
去查了一下 JavaScript event對象屬性方法

• currentTarget 返回其事件監聽器觸發該事件的元素。
• target 返回觸發此事件的元素（事件的目標節點）。

---

• target 觸發事件的元素。儘管事件是綁定在 li 上的，點 div.item-content 觸發的就是 div.item-content。
• currentTarget 事件綁定的元素。事件綁定在 li 無論你點誰 觸發的老是 li

解決沒法獲取到當前觸發事件的元素

handleMsglistStar(e){
    console.log(e.currentTarget)
    console.log(e.currentTarget.getAttribute('data-key'))
    //這樣就能拿到綁定在 li 上的信息了
}

{this.props.textList.map(item => (
    <li data-key={key} onClick={this.props.handleShowInfo}>
        <div className="item-content">
            <div className="item-media"><img src={item.headimgurl} /></div>
            <div className="item-inner"></div>
        </div>
    </li>
))}

結語：反正我目前找到的最好的解決方法，匆匆忙忙下班時間搞個文章記錄；不太全面，有些東西一筆過，遇到過這個問題的，一看就能明白，若有不正之處，歡迎指正。