React事件屬性

2022-05-29 22:45:11 字數 4065 閱讀 5215

一、簡介

二、滾動例子，滾動改變顏色

1


doctype html


>


2<


html 


lang


="zh-cn"


>


3<


head


>


4<


meta 


charset


="utf-8"


>


5<


title


>react涓殑浜嬩歡


title


>


6head


>


7<


body


>


8<


script 


src="./react-0.13.2/react-0.13.2/build/react.js"


>


script


>


9<


script 


src="./react-0.13.2/react-0.13.2/build/jsxtransformer.js"


>


script


>


10<


script 


type


="text/jsx"


>


11var


helloworld 


=react.createclass(


16},


17handlewheel: 


function


(event) )


23},


24render: 


function


()  style


=>


27<


p>


hello, world


<


/p>


28<


/div>;


29},


30});


31react.render(


<


helloworld


><


/helloworld>, document.body);


32script


>


33body


>


34html


>
三、滑鼠事件，輸對密碼才顯示內容

1


doctype html


>


2<


html 


lang


="zh-cn"


>


3<


head


>


4<


meta 


charset


="utf-8"


>


5<


title


>react涓殑浜嬩歡


title


>


6head


>


7<


body


>


8<


script 


src="./react-0.13.2/react-0.13.2/build/react.js"


>


script


>


9<


script 


src="./react-0.13.2/react-0.13.2/build/jsxtransformer.js"


>


script


>


10<


script 


type


="text/jsx"


>


11var


helloworld 


=react.createclass(


16},


17handlekeypress: 


function


(event) );


21console.log(


this


.state)


22},


23handlechange: 


function


(event) ,


26render: 


function


()  onchange


=><


/input>


29<


p style=}


>


you got it


!<


/p>


32<


/div>;


33},


34});


35react.render(


<


helloworld


><


/helloworld>, document.body);


36script


>


37body


>


38html


>
四、滑鼠事件2，記錄滑鼠的位置

1


doctype html


>


2<


html 


lang


="zh-cn"


>


3<


head


>


4<


meta 


charset


="utf-8"


>


5<


title


>react涓殑浜嬩歡


title


>


6head


>


7<


body


>


8<


script 


src="./react-0.13.2/react-0.13.2/build/react.js"


>


script


>


9<


script 


src="./react-0.13.2/react-0.13.2/build/jsxtransformer.js"


>


script


>


10<


script 


type


="text/jsx"


>


11var


helloworld 


=react.createclass(


17},


18handlemousemove: 


function


(event) );


23},


24render: 


function


()  style=}


>


3031


<


/div>;


32},


33});


34react.render(


<


helloworld


><


/helloworld>, document.body);


35script


>


36body


>


37html


>

react 事件處理

1.所有的事件以駝峰式命名如onclick 2.this作用域的問題，直接使用箭頭函式可以將該類的例項物件傳遞過去 若是呼叫的元件方法，需要使用this.handleclick this.handleclick.band this 這句話會建立乙個新的函式給handleclick，並把this當做引...

React事件摘錄

jsx 中以內聯 inline 的方式 合成事件 syntheticevent react 實現了乙個 合成事件 層 synthetic event system 這個事件模型保證了和 w3c 標準保持一致，所以不用擔心有什麼詭異的用法，並且這個事件層消除了 ie 與 w3c 標準實現之間的相容問題...

react事件處理

採用on 事件名的方式來繫結乙個事件，注意，這裡和原生的事件是有區別的，原生的事件全是小寫onclick,react裡的事件是駝峰onclick，react的事件並不是原生事件，而是合成事件。和普通瀏覽器一樣，事件handler會被自動傳入乙個event物件，這個物件和普通的瀏覽器event物件所包...