React事件绑定几种方法测试

前提

es6写法的类方法默认没有绑定this，不手动绑定this值为undefined。

因此讨论以下几种绑定方式。

一、构造函数constructor中用bind绑定

class App extends Component {
constructor (props) {
super(props)
this.state = {
t: 't'
}
// this.bind1 = this.bind1.bind(this) 无参写法
this.bind1 = this.bind1.bind(this, this.state.t)
}

// 无参写法
// bind1 () {
//   console.log('bind1', this)
// }

bind1 (t, event) {
console.log('bind1', this, t, event)
}

render () {
return (
<div>
<button onClick={this.bind1}>打印1</button>

</div>
)
}
}

二、在调用的时候使用bind绑定this

bind2 (t, event) {
console.log('bind2', this, t, event)
}

render () {
return (
<div>
<button onClick={this.bind2.bind(this, this.state.t)}>打印2</button>
</div>
)
}
// 无参写法同第一种

三、在调用的时候使用箭头函数绑定this

bind3 (t, event) {
console.log('bind3', this, t, event)
}

render () {
return (
<div>
// <button onClick={() => this.bind3()}>打印3</button> 无参写法
<button onClick={(event) => this.bind3(this.state.t, event)}>打印3</button>
</div>
)
}

四、使用属性初始化器语法绑定this

bind4 = () =>{
console.log('bind4', this)
}

render () {
return (
<div>
<button onClick={this.bind4}>打印4</button>
// 带参需要使用第三种方法包一层箭头函数
</div>
)
}

附加::方法（不能带参，stage 0草案中提供了一个便捷的方案——双冒号语法）

bind5(){
console.log('bind5', this)
}

render() {
return (
<div>
<button onClick={::this.bind5}></button>
</div>
)
}

方法一优缺点