React中ES6事件绑定相关事项

如果使用类似与onClick方法时

一定要写成 onClick={this.click.bind(this)} 否则无效果

第一种写法:
_handleClick(e) {
console.log(this);
}
render() {
return (
<div>
<h1 onClick={this._handleClick.bind(this)}>点击</h1>
</div>
);
}

1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11
<
4000
/ul>

第二种写法：
constructor(props) {
super(props);
this._handleClick = this._handleClick.bind(this)
}
_handleClick(e) {
console.log(this);
}
render() {
return (
<div>
<h1 onClick={this._handleClick}>点击</h1>
</div>
);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

第三种写法：
_handleClick = (e) => {
// 使用箭头函数(arrow function)
console.log(this);
}
render() {
return (
<div>
<h1 onClick={this._handleClick}>点击</h1>
</div>
);
}