与原生的事件处理有点差异，具体表现在：
- react使用驼峰事件命名,而不是小写
- 对于句柄来说传递的是一个jsx函数
//原生的写法
<button onclick="activateLasers()">
Activate Lasers
</button>
//react写法
<button onClick={activateLasers}>
Activate Lasers
</button>
- 阻止浏览器默认行为，原生事件处理，可以通过返回false来阻止阻止浏览器默认行为，也可以通过调用事件对象的preventDefault方法来实现。而react只能通过调用preventDefault来实现。
//原生的处理方式
<a href="#" onclick="console.log('The link was clicked.'); return false">
Click me
</a>
//在react中
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}
实例： 在页面实现按钮开关
在Toggle组件中，返回了button，根据状态显示on/off文案，并且监听点击事件，回调函数为handleClick，在回调中设置组件的状态，state改变后，则又调用render方法，更新UI。
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = { isToggleOn: true };
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
ReactDOM.render(
<Toggle />,
document.getElementById('root')
);
此处bind函数很有意思：先来看，bind的函数作用：改变函数执行的上下文，也就是this的指向。
bind函数会创建一个新的函数，称为绑定函数，并且调用的时候上下文指向创建时传入的第一个参数。
在本例中，点击出发onClick事件后，执行this.handleClick，此时的this指向是当前Toggle对象。
如果不使用bind函数，还可以使用属性初始化语法，也可以直接在钩子函数处使用箭头函数
handleClick = () => {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<button onClick={(e) => this.handleClick(e)}>
Click me
</button>
);
}
