React採用on+事件名的方式來綁定一個事件，註意，這裡和原生的事件是有區別的，原生的事件全是小寫 onclick , React里的事件是駝峰 onClick ，React的事件並不是原生事件，而是合成事件。 事件回調的幾種寫法 1.直接在組件內定義一個非箭頭函數的方法，然後在render里直接 ...
React採用on+事件名的方式來綁定一個事件，註意，這裡和原生的事件是有區別的，原生的事件全是小寫 onclick , React里的事件是駝峰 onClick ，React的事件並不是原生事件，而是合成事件。 事件回調的幾種寫法
1.直接在組件內定義一個非箭頭函數的方法，然後在render里直接使用 onClick=
{this.handleClick.bind(this)} (不推薦)
這種寫法需要用bind處理回調函數不然獲取不到thisimport React, { Component } from 'react'
export default class App extends Component {
render() {
return (
<div>
{/*
和vue不同react綁定事件回調不需要加()，this.handler即可
*/}
<button onClick={this.handler1.bind(this)}>寫法一</button>
</div>
)
}
handler1(e){
console.log('我是寫法一',e,'this:',this);
}
/*
call,改變this指向並自動執行函數
apply,改變this指向並自動執行函數
bind,改變this指向
*/
}
2.在組件內使用箭頭函數定義一個方法(推薦)
這種寫法不需要用bind處理回調函數，因為箭頭函數的this指向函數定義的外部作用域即class組件本身
import React, { Component } from 'react'
export default class App extends Component {
render() {
return (
<div>
{/*
和vue不同react綁定事件回調不需要加()，this.handler即可
*/}
<button onClick={this.handler1.bind(this)}>寫法一</button>
<button onClick={this.handler2}>寫法二</button>
</div>
)
}
handler1(e){
console.log('我是寫法一',e,'this:',this);
}
handler2=(e)=>{
console.log('我是寫法二',e,'this:',this);
}
/*
call,改變this指向並自動執行函數
apply,改變this指向並自動執行函數
bind,改變this指向
*/
}
3.直接在render里寫行內的箭頭函數(不推薦)
這種寫法也可獲得this，因為函數的this是指向其調用者。而箭頭函數的this指向其定義的外部作用域即render，render的this指向class，最終獲得this就是class
import React, { Component } from 'react'
export default class App extends Component {
render() {
return (
<div>
{/*
和vue不同react綁定事件回調不需要加()，this.handler即可
*/}
<button onClick={this.handler1.bind(this)}>寫法一</button>
<button onClick={this.handler2}>寫法二</button>
<button onClick={
(e)=>{
this.handler3(e)
}
}>寫法三</button>
</div>
)
}
handler1(e){
console.log('我是寫法一',e,'this:',this);
}
handler2=(e)=>{
console.log('我是寫法二',e,'this:',this);
}
handler3(e){
console.log('我是寫法三',e,'this:',this);
}
/*
call,改變this指向並自動執行函數
apply,改變this指向並自動執行函數
bind,改變this指向
*/
}
4.直接在組件內定義一個非箭頭函數的方法，然後在constructor里bind(this)(推薦)
class組件里的構造函數一定要使用super來繼承Component
import React, { Component } from 'react'
export default class App extends Component {
constructor(){
super()
this.handler4 = this.handler4.bind(this)
}
render() {
return (
<div>
{/*
和vue不同react綁定事件回調不需要加()，this.handler即可
*/}
<button onClick={this.handler1.bind(this)}>寫法一</button>
<button onClick={this.handler2}>寫法二</button>
<button onClick={
(e)=>{
this.handler3(e)
}
}>寫法三</button>
<button onClick={this.handler4}>寫法四</button>
</div>
)
}
handler1(e){
console.log('我是寫法一',e,'this:',this);
}
handler2=(e)=>{
console.log('我是寫法二',e,'this:',this);
}
handler3(e){
console.log('我是寫法三',e,'this:',this);
}
handler4(e){
console.log('我是寫法四',e,'this:',this);
}
/*
call,改變this指向並自動執行函數
apply,改變this指向並自動執行函數
bind,改變this指向
*/
}
這裡我一般使用方法二和三
註意：
和普通瀏覽器一樣，事件handler會被自動傳入一個 event 對象，這個對象和普通的瀏覽器 event 對 象所包含的方法和屬性都基本一致。不同的是 React中的 event 對象並不是瀏覽器提供的，而是它自 己內部所構建的。它同樣具有 event.stopPropagation 、 event.preventDefault 這種常用的方法
