React.js采坑系列(一)

事件監(jiān)聽

在React.js中監(jiān)聽并不是一件很難的事情,我們只需在監(jiān)聽事件的元素加上屬性on click等等這樣的屬性就可以了过椎。

圖片.png

我們只需要在h1標簽上加上onClick事件鸳君,然后onClick后面是一個表達式的插入凭峡,這個表達式返回組件Hello的一個方法胜宇。在這里只要用戶每點擊一次標題,控制臺就會輸出你點擊了一下我亮隙!

圖片.png

在 React.js 不需要手動調(diào)用瀏覽器原生的 addEventListener 進行事件監(jiān)聽垢夹。React.js 幫我們封裝好了一系列的 on* 的屬性溢吻,當你需要為某個元素監(jiān)聽某個事件的時候,只需要簡單地給它加上 on* 就可以了果元。而且你不需要考慮不同瀏覽器兼容性的問題促王,React.js 都幫我們封裝好這些細節(jié)了。

但是需要注意的是這些事件屬性名都必須要用駝峰命名法噪漾。

event對象

與普通瀏覽器一樣硼砰,事件監(jiān)聽函數(shù)會自動傳入一個event對象,這個對象和普通瀏覽器的event對象所包含的方法和屬性基本一致欣硼。但是React.js中的event對象并不是瀏覽器所提供的题翰,而是它內(nèi)部所構(gòu)建的。

我們來看一下诈胜,當用戶點擊h1的時候豹障,h1inHTML也就是這是一個標題!就會在控制臺打印出來焦匈。

圖片.png
圖片.png

關(guān)于事件中的this

一般在某個類的實例方法里面的this指的是這個實例本身血公。但是在下面的這個例子中直接把this給打印出來,你看到會是null或者是undefined缓熟。

圖片.png
圖片.png

這是因為 React.js 調(diào)用你所傳給它的方法的時候累魔,并不是通過對象方法的方式調(diào)用(this.handleOnClick),而是直接通過函數(shù)調(diào)用 (handleOnClick)够滑,所以事件監(jiān)聽函數(shù)內(nèi)并不能通過 this 獲取到實例垦写。

如果你想在事件函數(shù)當中使用當前的實例,你需要手動地將實例方法 bind 到當前實例上再傳入給 React.js彰触。

圖片.png
圖片.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末梯投,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌分蓖,老刑警劉巖尔艇,帶你破解...
    沈念sama閱讀 217,277評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異么鹤,居然都是意外死亡终娃,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評論 3 393
  • 文/潘曉璐 我一進店門午磁,熙熙樓的掌柜王于貴愁眉苦臉地迎上來尝抖,“玉大人,你說我怎么就攤上這事迅皇∶亮桑” “怎么了?”我有些...
    開封第一講書人閱讀 163,624評論 0 353
  • 文/不壞的土叔 我叫張陵登颓,是天一觀的道長搅荞。 經(jīng)常有香客問我,道長框咙,這世上最難降的妖魔是什么咕痛? 我笑而不...
    開封第一講書人閱讀 58,356評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮喇嘱,結(jié)果婚禮上茉贡,老公的妹妹穿的比我還像新娘。我一直安慰自己者铜,他們只是感情好腔丧,可當我...
    茶點故事閱讀 67,402評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著作烟,像睡著了一般愉粤。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上拿撩,一...
    開封第一講書人閱讀 51,292評論 1 301
  • 那天衣厘,我揣著相機與錄音,去河邊找鬼压恒。 笑死影暴,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的探赫。 我是一名探鬼主播型宙,決...
    沈念sama閱讀 40,135評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼期吓!你這毒婦竟也來了早歇?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,992評論 0 275
  • 序言:老撾萬榮一對情侶失蹤讨勤,失蹤者是張志新(化名)和其女友劉穎箭跳,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體潭千,經(jīng)...
    沈念sama閱讀 45,429評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡谱姓,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,636評論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了刨晴。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片屉来。...
    茶點故事閱讀 39,785評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖狈癞,靈堂內(nèi)的尸體忽然破棺而出茄靠,到底是詐尸還是另有隱情,我是刑警寧澤蝶桶,帶...
    沈念sama閱讀 35,492評論 5 345
  • 正文 年R本政府宣布慨绳,位于F島的核電站,受9級特大地震影響真竖,放射性物質(zhì)發(fā)生泄漏脐雪。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,092評論 3 328
  • 文/蒙蒙 一恢共、第九天 我趴在偏房一處隱蔽的房頂上張望战秋。 院中可真熱鬧,春花似錦讨韭、人聲如沸脂信。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽吉嚣。三九已至,卻和暖如春蹬铺,著一層夾襖步出監(jiān)牢的瞬間尝哆,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1 269
  • 我被黑心中介騙來泰國打工甜攀, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留秋泄,地道東北人。 一個月前我還...
    沈念sama閱讀 47,891評論 2 370
  • 正文 我出身青樓规阀,卻偏偏與公主長得像恒序,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子谁撼,可洞房花燭夜當晚...
    茶點故事閱讀 44,713評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 原教程內(nèi)容詳見精益 React 學習指南歧胁,這只是我在學習過程中的一些閱讀筆記,個人覺得該教程講解深入淺出,比目前大...
    leonaxiong閱讀 2,834評論 1 18
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,104評論 25 707
  • 給自己一點空間 一切都會過去的 如今,在我們談起愛情的時候崭参,都是一副感慨萬般的態(tài)度呵曹,帶著淡淡的冷漠,有點憂傷的說道...
    白系閱讀 287評論 0 0
  • 偶爾從單位紙堆里翻出了這么兩張照片何暮。 這是學校的舞臺奄喂,現(xiàn)在看來確是歷史。 第一張應(yīng)是
    隱之_de1d閱讀 200評論 0 0
  • 總覺得自己比別人更加敏感海洼,能細微的感受到生活中的種種情愫 但是跨新,總有一個人,罵醒你的矯情坏逢,揭開你的虛弱玻蝌,你的星星點...
    會走路的電梯閱讀 175評論 0 0