- Taro多端開發權威指南:小程序、H5與App高效開發實戰
- 李佩忠編著
- 452字
- 2021-05-19 18:01:17
2.4 事件處理
1.基本使用
Taro元素的事件處理和DOM元素的很相似。但是有一點語法上的不同,Taro的事件綁定屬性均以on開頭且為駝峰式命名,事件屬性的值為函數。下面做一個簡單對比。
HTML為元素綁定事件的寫法,示例如下:

Taro為組件綁定事件的寫法,示例如下:


在Taro中,事件處理函數的參數中,同樣可以獲取事件對象,通過事件對象可以進行事件操作,如阻止事件冒泡,代碼示例如下:

2.為事件處理函數傳參
假如在一個列表中,列表的每一項都有一個“刪除”按鈕,單擊“刪除”按鈕刪除對應的數據:


本例使用函數的bind方法解決this指向問題,當然我們還可以使用箭頭函數:

或者使用函數柯里化思想:


上例中,單擊View組件會調用this.handleClick(current),該函數調用后會返回一個新的函數,在這個函數中可以訪問current值,同時能保證this指向的是當前Title組件。
3.自定義事件
有時存在這樣的需求,期望組件內部的狀態變化或操作能夠傳達給上層,這種需求通常被稱為父子組件之間的通信,父組件期望子組件某個事件觸發時,父組件執行某些特定操作。需要注意的是,自定義事件的屬性名一定要以on開頭,并采用駝峰式命名法,示例如下:
