React基础教程(五)：事件处理

事件处理

1、绑定事件

1.1、绑定方式1

<Button size={"large"} type={"primary"} onClick={ ()=>{console.log("Click1")} }>add1</Button>

1.2、绑定方式2

<Button size={"large"} type={"primary"} onClick={ this.handlerClick2 }>add2</Button>handlerClick2(){console.log("Click2")
}

1.3、绑定方式3

<Button size={"large"} type={"primary"} onClick={ this.handlerClick3 }>add3</Button>handlerClick3 = ()=>{console.log("Click3")
}

1.4、绑定方式4 `（最为推荐此写法）`

<Button size={"large"} type={"primary"} onClick={ ()=>{this.handlerClick4() // 比较推荐} }>add4</Button>handlerClick4 = ()=>{console.log("Click4")}

1.5 完整代码

import React, {Component} from "react";
import { Button, Input } from 'antd';import './css/App.css'export default class App extends Component {render() {return (<div style={{marginTop:10}}><Input style={{width:300}} size={"large"}  /><Button size={"large"} type={"primary"} onClick={ ()=>{console.log("Click1")} }>add1</Button><Button size={"large"} type={"primary"} onClick={ this.handlerClick2 }>add2</Button><Button size={"large"} type={"primary"} onClick={ this.handlerClick3 }>add3</Button><Button size={"large"} type={"primary"} onClick={ ()=>{this.handlerClick4() // 比较推荐} }>add4</Button></div>)}handlerClick2(){console.log("Click2")}handlerClick3 = ()=>{console.log("Click3")}handlerClick4 = ()=>{console.log("Click4")}
}

2、事件handler的写法

一般推荐handlerClick4()的写法，也会方便传参数。

import React, {Component} from "react";
import { Button, Input } from 'antd';import './css/App.css'export default class App extends Component {a = 35;render() {return (<div style={{marginTop:10}}><Input style={{width:300}} size={"large"}  /><Button size={"large"} type={"primary"} onClick={ ()=>{console.log("我能不能访问到 a= ", this.a)} }>add1</Button>&nbsp;{/*不推荐*/}<Button style={{backgroundColor:'#e37318',border:"none"}} size={"large"} type={"primary"} onClick={ this.handlerClick2.bind(this) }>add2-不推荐</Button>&nbsp;{/*比较推荐*/}<Button size={"large"} type={"primary"} onClick={ this.handlerClick3 }>add3-推荐</Button>&nbsp;{/*非常推荐*/}<Button style={{backgroundColor:'#2ba471', border:"none"}} size={"large"} type={"primary"} onClick={ ()=>{this.handlerClick4() // 非常推荐，传参数} }>add4-推荐-传参</Button></div>)}/*bind：改变this，手动执行函数call：改变this，自动执行函数apply：改变this，自动执行函数*/// 不推荐这种写法handlerClick2(){console.log(this); // undefinedconsole.log("Click2", this.a); // 报错}// 推荐写法，传参数就不太方便了handlerClick3 = ()=>{console.log("Click3", this.a) // 35。箭头函数}handlerClick4 = ()=>{console.log("Click4", this.a) // 35.箭头函数}}