react事件处理、以及给函数传事件对象e

转自：https://react.docschina.org/docs/handling-events.html

一、onClick后面的方法如何处理

1: 没有在方法后面添加 “()”，应该为这个方法在constructor中绑定this

class Toggle extends Component {
	constructor(props){
		super(props);
		
		// 为了在回调中使用"this"，这个绑定是必不可少的
		this.handleClick = this.handleClick.bind(this)
	}
	
	handleClick() {
		// some codes...
	}
	
	render() {
		return (
			<button onClick={ this.handleClick }>
				click me
			</button>
		)
	}
}

不使用bind绑定this的两个案例

2: 使用public class fields语法

class Toggle extends Component {
	// 此语法确保 handleClick 内的 this 已被绑定
	// 注意：这是*试验性*语法
	handleClick = () => {
		// some codes...
	}
	
	render() {
		return (
			<button onClick={ this.handleClick }>
				click me
			</button>
		)
	}
}

3:在回调中使用箭头函数

class Toggle extends Component {
	handleClick() {
		// some codes...
	}
	
	render() {
		return (
			<button onClick={ ()=> { this.handleCLick() }}>
			 click me
			</button>
		)
	}
}

总结: 你必须谨慎对待JSX回调函数的this，在javascript中class的方法默认不会绑定this。如果你忘记绑定this.handleClick并把它传入了onClick，当你调用这个函数时候this的值为undefined。

二、向事件处理程序传递参数(事件对象)

给函数传递额外参数：以下两种方式

<button onClick = { (e)=> this.handleClick( id,e ) }></button>
<button onClick = { this.handleClick.bind( this,id ) }></button>

上述两种方式是等价的，分别通过 箭头函数 和 Function.prototype.bind 来实现。

在上面两种情况下，React的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。