react中的事件繫結以及與原生事件的區別

2021-10-25 18:50:10 字數 1100 閱讀 9070

事件繫結

lang

="en"

>

>

charset

="utf-8"

>

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

>

documenttitle

>

src=

"">

script

>

src=

"">

script

>

src=

"">

script

>

head

>

>

"root"

>

div>

type

="text/babel"

>

// 1.react中的事件繫結

// 事件名稱使用駝峰命名

class

hello

extends

react.component

render()

>這是使用class類建立的元件<

/div>)}

} reactdom.

render

(>

, document.

getelementbyid

('root'))

script

>

body

>

html

>

區別

原生事件名純小寫,react中事件名小駝峰

原生事件傳入乙個字串,react中使用jsx傳入函式作為事件處理函式

原生事件可以使用return false 阻止預設行為,react中必須顯式使用preventdefault

React中繫結事件

1.事件的名稱都是react提供的,因此名稱的首字母必須大寫 onclick onmouseover 2.為事件提供的處理函式必須是如下格式 onclick 3.用的最多的事件繫結形式為 this.show 傳參 按鈕 show arg1 例如 import react from react exp...

react事件繫結this的原因

1.首先是js本身特性決定的 this永遠指向最後呼叫它的那個物件 var name windowname function a a windowname this永遠指向最後呼叫它的物件。window.a var name windowname var obj obj.fun1 objname t...

React事件繫結的幾種方式對比

class button extends react.component handleclick render click me button class button extends react.component render click me button class button exten...