react中处理事件的编写方法

在react中元素处理事件时，通过jsx, 传递一个函数作为事件处理程序，而并不是跟html中一样，使用一个字符串。

例如

// 创建一个组件
class Text extends React.Component{
	constructor(props){
		super(props)
		// 2. 必须有这个绑定，使this在回调中起到作用
		this.handleClick = this.handleClick.bind(this)
	}
	render(){
		return(
			// 1. 设置点击事件
			<button onClick={handleClick}>点击</button>
		)
	}
	// 3. 事件程序
	handleClick(){
		console.log("这是一个点击事件程序");
	}
}
// 这里的this必须绑定否则的话，this会是undefined，一般情况，如果你引用一个后面没有跟() 的方法，例如 onClick = {this.handleClick}, 就必须绑定该方法

这样写调用bind会有些麻烦，也可以使用属性初始化语法, 这样可以使用属性初始值设置来正确地绑定(bind)回调:

class Text extends React.Component{
	// 这个语法确保 this 绑定在 handleClick中
	handleClick =()=>{
		console.log("这是一个点击事件")
	}
	render(){
		return(
			<button onClick={this.handleClick}>点击</button>
		)
	}
}
// 这种语法在`创建React App` 中是默认开启的

也可以在回调中使用一个箭头函数

class Text extends React.Component{
	// 这个语法确保 this 绑定在 handleClick中
	handleClick (){
		console.log("这是一个点击事件")
	}
	render(){
		return(
			<button onClick={()=>this.handleClick()}>点击</button>
		)
	}
}

用这种语法写的话，就是每次这个Text组件渲染时都会创建一个不同的回调，但会如果这个回调被作为prop属性传递下级组件时，这些组件可以能需要额外的重复渲染，会有一些性能问题。