react學(xué)習(xí)-7.React事件

之前在react組件中示绊,點(diǎn)擊按鈕改變input框的編輯狀態(tài)。我們給結(jié)構(gòu)添加onClick,咦暂论?奇怪面褐,為什么不是onclick(),原生js就這樣寫的啊。

原來:

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

  • React 事件使用駝峰命名展哭,之前講解jsx提過湃窍,屬性都是駝峰式。而不是全部小寫匪傍。
  • 通過 JSX , 你傳遞一個(gè)函數(shù)作為事件處理程序您市,而不是一個(gè)字符串。
    //html
    <button onclick="activateLasers()">
      Activate Lasers
    </button>

    //react
    <button onClick={activateLasers}>
      Activate Lasers
    </button>
  • 在 React 中你不能通過返回 false(即 return false; 語句) 來阻止默認(rèn)行為役衡。必須明確調(diào)用 preventDefault茵休。

例如,要阻止鏈接打開一個(gè)新頁面的默認(rèn)行為手蝎,可以這樣寫:

//html
<a href=""http://www.baidu.com" onclick="console.log('鏈接被點(diǎn)擊'); return false">
  Click me
</a>
//輸出鏈接被點(diǎn)擊榕莺,但未打開新頁面


//react
 handleClick(e) {
    e.preventDefault();
    console.log('鏈接被點(diǎn)擊');
  }
  render() {
      return (
        <a   onClick={this.handleClick}>閃動的文字</a>
      )
  }

下一篇——react學(xué)習(xí)-8.獲取真實(shí)DOM節(jié)點(diǎn)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市棵介,隨后出現(xiàn)的幾起案子帽撑,更是在濱河造成了極大的恐慌,老刑警劉巖鞍时,帶你破解...
    沈念sama閱讀 212,884評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異扣蜻,居然都是意外死亡逆巍,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,755評論 3 385
  • 文/潘曉璐 我一進(jìn)店門莽使,熙熙樓的掌柜王于貴愁眉苦臉地迎上來锐极,“玉大人,你說我怎么就攤上這事芳肌×樵伲” “怎么了?”我有些...
    開封第一講書人閱讀 158,369評論 0 348
  • 文/不壞的土叔 我叫張陵亿笤,是天一觀的道長翎迁。 經(jīng)常有香客問我,道長净薛,這世上最難降的妖魔是什么汪榔? 我笑而不...
    開封第一講書人閱讀 56,799評論 1 285
  • 正文 為了忘掉前任,我火速辦了婚禮肃拜,結(jié)果婚禮上痴腌,老公的妹妹穿的比我還像新娘。我一直安慰自己燃领,他們只是感情好士聪,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,910評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著猛蔽,像睡著了一般剥悟。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 50,096評論 1 291
  • 那天懦胞,我揣著相機(jī)與錄音替久,去河邊找鬼。 笑死躏尉,一個(gè)胖子當(dāng)著我的面吹牛蚯根,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播胀糜,決...
    沈念sama閱讀 39,159評論 3 411
  • 文/蒼蘭香墨 我猛地睜開眼颅拦,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了教藻?” 一聲冷哼從身側(cè)響起距帅,我...
    開封第一講書人閱讀 37,917評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎括堤,沒想到半個(gè)月后碌秸,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,360評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡悄窃,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,673評論 2 327
  • 正文 我和宋清朗相戀三年讥电,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片轧抗。...
    茶點(diǎn)故事閱讀 38,814評論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡恩敌,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出横媚,到底是詐尸還是另有隱情纠炮,我是刑警寧澤,帶...
    沈念sama閱讀 34,509評論 4 334
  • 正文 年R本政府宣布灯蝴,位于F島的核電站恢口,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏穷躁。R本人自食惡果不足惜弧蝇,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,156評論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望折砸。 院中可真熱鬧看疗,春花似錦、人聲如沸睦授。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽去枷。三九已至怖辆,卻和暖如春是复,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背竖螃。 一陣腳步聲響...
    開封第一講書人閱讀 32,123評論 1 267
  • 我被黑心中介騙來泰國打工淑廊, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人特咆。 一個(gè)月前我還...
    沈念sama閱讀 46,641評論 2 362
  • 正文 我出身青樓季惩,卻偏偏與公主長得像,于是被迫代替她去往敵國和親腻格。 傳聞我的和親對象是個(gè)殘疾皇子画拾,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,728評論 2 351

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

  • 原教程內(nèi)容詳見精益 React 學(xué)習(xí)指南,這只是我在學(xué)習(xí)過程中的一些閱讀筆記菜职,個(gè)人覺得該教程講解深入淺出青抛,比目前大...
    leonaxiong閱讀 2,813評論 1 18
  • 3. JSX JSX是對JavaScript語言的一個(gè)擴(kuò)展語法, 用于生產(chǎn)React“元素”酬核,建議在描述UI的時(shí)候...
    pixels閱讀 2,810評論 0 24
  • ??JavaScript 與 HTML 之間的交互是通過事件實(shí)現(xiàn)的嫡意。 ??事件举瑰,就是文檔或?yàn)g覽器窗口中發(fā)生的一些特...
    霜天曉閱讀 3,478評論 1 11
  • 官網(wǎng)地址https://facebook.github.io/react/docs/hello-world.htm...
    pixels閱讀 707評論 0 6
  • HTML模版 之后出現(xiàn)的React代碼嵌套入模版中。 1. Hello world 這段代碼將一個(gè)一級標(biāo)題插入到指...
    ryanho84閱讀 6,225評論 0 9