React元素的事件绑定与DOM元素十分相似，其区别有以下几点：
- React事件使用驼峰法命名，而不是小写命名。
- 使用JSX可以将函数作为事件来传递，而不是字符串。
例如，在HTML中：
<button onclick="activateLasers()">
Activate Lasers
</button>
在React中：
<button onClick={activateLasers}>
Activate Lasers
</button>
- 在HTML中可以通过
return false来阻止默认操作，而在React中，需要通过调用preventDefault来阻止默认操作。
例如，阻止默认打开一个新页面的操作，在HTML中：
<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>
);
}
在这里，e是合成事件。React根据 W3C 规范定义了这些合成事件，因此可以无需担心跨浏览器兼容性。有关详细信息，请参阅SyntheticEvent
参考指南。
使用React时，通常不需要在创建DOM元素后通过调用addEventListener来添加监听，只需在最初呈现元素时提供监听即可。
当使用 ES6 的类
定义了一个组件，常见的做法是将事件处理作为类的方法。
例如，Toggle组件返回一个可以切换“ON”和“OFF”的按钮：
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(state => ({
isToggleOn: !state.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
ReactDOM.render(
<Toggle />,
document.getElementById('root')
);
