React 事件绑定方式

1.bind 绑定方法
这个方法可以帮助我们绑定事件处理器内的this，并可以向事件处理器中传递参数。

import React from 'react';
 
class App extends React.Component {
	handleClick(e) {
		console.log(e)
	}
render () {
	return <button onClick={this.handleClick.bind(this,'test')}>Test</button>
}
}

2.构造器内声明
在组件的构造器内完成了this的绑定，这种绑定方式的好处在于仅需要进行一次绑定，而不需要每次调用事件监听器去执行绑定操作。

import React from 'react';
 
class App extends React.Component {
	constructor(props) {
		super(props);
		this.handleClick = this.handleClick.bind(this);
	}
	handleClick(e) {
		console.log(e)
	}
render () {
	return <button onClick={this.handleClick}>Test</button>
}
}

3.箭头函数
箭头函数不仅是函数的“语法糖”，它还是自动绑定了定义此函数作用域的this，因此我们不需要再对它使用bind方法。

import React from 'react';
 
class App extends React.Component {
	const handleClick = (e) => {
		console.log(e)
	}
render () {
	return <button onClick={this.handleClick}>Test</button>
}
}

或

import React from 'react';
 
class App extends React.Component {
	const handleClick = (e) => {
		console.log(e)
	}
render () {
	return <button onClick={() => this.handleClick()}>Test</button>
}
}