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

williamwen1986 發布于2019-08-19 18:27 / 1529人閱讀

摘要：到這里就要另外辦法了，看下面的代碼拿到當前觸發事件的元素跑一遍，還是不行。。。去查了一下對象屬性方法返回其事件監聽器觸發該事件的元素。返回觸發此事件的元素事件的目標節點。事件綁定的元素。

應用場景：一組列表，需獲取當前觸發 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 => (
    
        
            
            
        
    
))}

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

GPU云服務器云服務器獲取當前的時間事件觸發事件觸發器 java事件觸發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79622.html

vue面試

摘要：雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的偵聽器，當需要在數據變化時執行異步或開銷較大的操作時，通過偵聽器最有用。路由的鉤子函數首頁可以控制導航跳轉，，等，一般用于頁面的修改。談談你對MVVM開發模式的理解 MVVM分為Model、View、ViewModel三者。Model 代表數據模型，數據和業務邏輯都在Model層中定義；View 代表UI視圖，負責數據的展示；...

vspiders 2019-08-23 18:38 評論0 收藏0
5、React組件事件詳解

摘要：組件事件響應在構建虛擬的同時，還構建了自己的事件系統且所有事件對象和規范保持一致。的事件系統和瀏覽器事件系統相比，主要增加了兩個特性事件代理和事件自動綁定。 React組件事件響應 React在構建虛擬DOM的同時，還構建了自己的事件系統；且所有事件對象和W3C規范保持一致。 React的事件系統和瀏覽器事件系統相比，主要增加了兩個特性：事件代理、和事件自動綁定。 1、事件代理 ...

Ververica 2019-08-22 15:13 評論0 收藏0
Vue面試中，經常會被問到的面試題/Vue知識點整理

摘要：可以在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程。我工作中只用到，對和不怎么熟與的區別相同點都支持指令內置指令和自定義指令都支持過濾器內置過濾器和自定義過濾器都支持雙向數據綁定都不支持低端瀏覽器。看看面試題，只是為了查漏補缺，看看自己那些方面還不懂。切記不要以為背了面試題，就萬事大吉了，最好是理解背后的原理，這樣面試的時候才能侃侃而談。不然，稍微有水平的面試官一看就能看出，是...

mengbo 2019-08-23 11:54 評論0 收藏0
Vue_Vue權威指南

摘要：效率不高，很多多余，稱之為臟檢查。通過索引設置數組元素并觸發視圖更新。解決閃爍問題自定義指令自定義指令提供一種機制將數據的變化映射為行為。 Vue特性 Vue只是聚焦視圖層，是一個構建數據驅動的Web界面的庫。 Vue通過簡單 API提供高效的數據綁定和靈活的組件系統輕量數據綁定指令插件化架構從傳統后臺MVC 向REST API + 前端MV*遷移DOM是數據的一種自然映...

SimonMa 2019-08-21 14:31 評論0 收藏0
最近遇到的前端面試題(2017.03.08更新版)

摘要：通過管理組件通信通過驅動視圖比較差異進行更新操作作者第七頁鏈接來源知乎著作權歸作者所有，轉載請聯系作者獲得授權。達到無刷新的效果。對象的狀態不受外界影響。對象代表一個異步操作，有三種狀態進行中已完成，又稱和已失敗。以下問題解釋非本人原創，是根據面試經驗整理后覺得更容易理解的解釋版本，歡迎補充。一. 輸入url后的加載過程從輸入 URL 到頁面加載完成的過程中都發生了什么計算機...

linkFly 2019-08-21 11:35 評論0 收藏0