react事件處理

2021-09-25 01:16:14 字數 975 閱讀 5350

採用on+事件名的方式來繫結乙個事件,注意,這裡和原生的事件是有區別的,原生的事件全是小寫onclick, react裡的事件是駝峰onclickreact的事件並不是原生事件,而是合成事件

和普通瀏覽器一樣,事件handler會被自動傳入乙個event物件,這個物件和普通的瀏覽器event物件所包含的方法和屬性都基本一致。不同的是 react中的event物件並不是瀏覽器提供的,而是它自己內部所構建的。它同樣具有event.stoppropagationevent.preventdefault這種常用的方法

import react, from 'react';

import home from './component/home'

constructor ()

change = () =>

change1 ()

eventhander ( e )

argumenthandler ( a, b,e )

transmithandler ( a, b )

render () }> 事件第一種寫法 - 不推薦

事件第二種寫法 - 推薦

事件第三種寫法 - 不推薦

事件第四種寫法 - 推薦

事件物件

}> 事件傳參 - 方法1

事件傳參 - 方法2

);}}

import react ,  from 'react'

class home extends component

} render () }> home- 事件 - 由父元件傳遞過來的 )}}

export default home

react 事件處理

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

React 事件處理函式

觸控事件 ontouchcancel ontouchend ontouchmove ontouchstart 只會在移動裝置上接受 鍵盤事件 onkeydown onkeypress onkeyup 剪下事件 oncopy oncut onpaste 表單事件 onchange oninput on...

React事件處理和原生JS事件處理

事件觸發呼叫有三種方式 1.on event 事件屬性,手動觸發 on event 事件是window物件上的方法。2.on event 事件屬性,通過htmlelement.click 模擬觸發 3.addeventlistener監聽事件,手動觸發 this指向 如果onevent事件屬性定義的...