React處理事件

通過 React 元素處理事件跟在 DOM 元素上處理事件非常相似同诫。但是有一些語法上的區(qū)別:

  • React 事件使用駝峰命名咙俩,而不是全部小寫向胡。
    通過 JSX , 你傳遞一個函數(shù)作為事件處理程序矾湃,而不是一個字符串
  • 另一個區(qū)別是亡脑,在 React 中你不能通過返回 false(愚人碼頭注:即 return false; 語句) 來阻止默認(rèn)行為。必須明確調(diào)用 preventDefault 邀跃。例如霉咨,對于純 HTML ,要阻止鏈接打開一個新頁面的默認(rèn)行為拍屑,可以這樣寫:

當(dāng)使用一個 ES6 類處理事件

定義一個組件時途戒,通常的一個事件處理程序是類上的一個方法。例如僵驰, Toggle
組件渲染一個按鈕喷斋,讓用戶在 “ON” 和 "OFF" 狀態(tài)之間切換:

  • 在JSX回調(diào)中你必須注意 this 的指向。 在 JavaScript 中蒜茴,類方法默認(rèn)沒有 綁定 的继准。如果你忘記綁定 this.handleClick 并將其傳遞給onClick,那么在直接調(diào)用該函數(shù)時矮男,this會是 undefined移必。
  • 這不是 React 特有的行為;這是 JavaScript 中的函數(shù)如何工作的一部分毡鉴。 一般情況下崔泵,如果你引用一個后面沒跟 ()的方法,例如 onClick={this.handleClick}猪瞬,那你就應(yīng)該 綁定(bind) 該方法憎瘸。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市陈瘦,隨后出現(xiàn)的幾起案子幌甘,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,997評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件锅风,死亡現(xiàn)場離奇詭異酥诽,居然都是意外死亡,警方通過查閱死者的電腦和手機皱埠,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,603評論 3 392
  • 文/潘曉璐 我一進(jìn)店門肮帐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人边器,你說我怎么就攤上這事训枢。” “怎么了忘巧?”我有些...
    開封第一講書人閱讀 163,359評論 0 353
  • 文/不壞的土叔 我叫張陵渣窜,是天一觀的道長疮装。 經(jīng)常有香客問我聚谁,道長存皂,這世上最難降的妖魔是什么泻帮? 我笑而不...
    開封第一講書人閱讀 58,309評論 1 292
  • 正文 為了忘掉前任悠抹,我火速辦了婚禮夭织,結(jié)果婚禮上网杆,老公的妹妹穿的比我還像新娘吃环。我一直安慰自己也颤,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,346評論 6 390
  • 文/花漫 我一把揭開白布郁轻。 她就那樣靜靜地躺著翅娶,像睡著了一般。 火紅的嫁衣襯著肌膚如雪好唯。 梳的紋絲不亂的頭發(fā)上竭沫,一...
    開封第一講書人閱讀 51,258評論 1 300
  • 那天,我揣著相機與錄音骑篙,去河邊找鬼蜕提。 笑死,一個胖子當(dāng)著我的面吹牛靶端,可吹牛的內(nèi)容都是我干的谎势。 我是一名探鬼主播,決...
    沈念sama閱讀 40,122評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼杨名,長吁一口氣:“原來是場噩夢啊……” “哼脏榆!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起台谍,我...
    開封第一講書人閱讀 38,970評論 0 275
  • 序言:老撾萬榮一對情侶失蹤须喂,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體坞生,經(jīng)...
    沈念sama閱讀 45,403評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡仔役,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,596評論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了恨胚。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片骂因。...
    茶點故事閱讀 39,769評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖赃泡,靈堂內(nèi)的尸體忽然破棺而出寒波,到底是詐尸還是另有隱情,我是刑警寧澤升熊,帶...
    沈念sama閱讀 35,464評論 5 344
  • 正文 年R本政府宣布俄烁,位于F島的核電站,受9級特大地震影響级野,放射性物質(zhì)發(fā)生泄漏页屠。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,075評論 3 327
  • 文/蒙蒙 一蓖柔、第九天 我趴在偏房一處隱蔽的房頂上張望辰企。 院中可真熱鬧,春花似錦况鸣、人聲如沸牢贸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,705評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽潜索。三九已至,卻和暖如春懂酱,著一層夾襖步出監(jiān)牢的瞬間竹习,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,848評論 1 269
  • 我被黑心中介騙來泰國打工列牺, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留整陌,地道東北人。 一個月前我還...
    沈念sama閱讀 47,831評論 2 370
  • 正文 我出身青樓瞎领,卻偏偏與公主長得像蔓榄,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子默刚,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,678評論 2 354

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

  • 本筆記基于React官方文檔甥郑,當(dāng)前React版本號為15.4.0。 1. 安裝 1.1 嘗試 開始之前可以先去co...
    Awey閱讀 7,705評論 14 128
  • 深入JSX date:20170412筆記原文其實JSX是React.createElement(componen...
    gaoer1938閱讀 8,061評論 2 35
  • 最近看了一本關(guān)于學(xué)習(xí)方法論的書荤西,強調(diào)了記筆記和堅持的重要性澜搅。這幾天也剛好在學(xué)習(xí)React伍俘,所以我打算每天堅持一篇R...
    gaoer1938閱讀 1,675評論 0 5
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)勉躺,斷路器癌瘾,智...
    卡卡羅2017閱讀 134,654評論 18 139
  • GUIDS 第一章 為什么使用React? React 一個提供了用戶接口的JavaScript庫饵溅。 誕生于Fac...
    jplyue閱讀 3,534評論 1 11