# 事件处理
# 事件绑定
绑定事件有三种写法:
# bind
语法
export default class A extends React.Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick() { alert("clicked"); } render() { return <button onClick={this.handleClick}>click</button>; } }
Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# class field
export default class A extends React.Component { handleClick = () => { alert("clicked"); }; render() { return <button onClick={this.handleClick}>click</button>; } }
Copied!
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
class field
将事件处理函数绑定在组件实例上, 也就是对于同样的多个 A 组件,它们的handleClick
方法都是独自占领一个内存空间的. 如果该组件的复用频率过高, 会拖慢 App 的速度.
# 在回调中使用箭头函数
export default class A extends React.Component { handleClick() { alert("clicked"); } render() { return ( <button onClick={() => { this.handleClick(); }} > click </button> ); } }
Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
与class field
不同, 这种写法是将事件处理函数绑定在原型上, 也就是多个 A 组件都共用一个handleClick
函数. 这种写法也被认为是最佳实践.
# 向绑定事件中传递参数
以下两种方式都可以向事件处理函数传递参数:
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button> <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
Copied!
1
2
2