react中如何獲取onclick事件調用元素的dom對象

今天終於有時間寫博客了,

前幾天項目有個需求,我感覺用dom操作兄弟元素實現比較方便,但是前端用的react框架不能用jquery的$(this)獲取當前元素,查了好多資料和嘗試后寫下總結:

在HTML元素處寫法如下:

　　　　<OverflowMenuItem
                itemText={locale.modify}
                onClick={(e) => this.expand(e)}
              />

　　方法處如下:

@action
  expand = (e) => {
    console.log(e);
}

　　打印結果如下:

 

打印出來一大堆東西中的currentTarger其實就是我們需要的,這次換成打印currentTarger:

加一句

console.log(e.currentTarget);

結果如圖

 

進行了幾個dom操作后.的確這就是觸發元素本身,

總結,

調用方法處寫成

onClick={(e) => this.expand(e)}

方法內可以通過e.currentTarget獲取觸發元素的dom對象

expand = (e) => {

　　console.log(e);

　　console.log(e.currentTarget);

}