用 React 元素处理事件和在DOM元素里处理事件非常相似。有一些语法差异：
- React 事件使用驼峰式命名，而不是小写
- 用JSX，你能传递函数作为事件处理器，而不是一个字符串
HTML:
<button onclick="activateLasers()">
Activate Lasers
</button>
React:
<button onClick={activateLasers}>
Activate Lasers
</button>
另外一个区别，在 React 中，不能用 return false 阻止默认行为。必须直接调用 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 spec 定义这些合成事件，所以不需要担心浏览器的兼容性。
备注：合成事件--是一个跨浏览器原生事件包装器，它具有与浏览器原生事件相同的接口，包括 stopPropagation() 和 preventDefault() ，除了原生事件在所有浏览器中，他们工作方式都相同。
当使用 React 时，通常不需要调用 addEventListener 对创建后的DOM元素添加监听器。相反，当元素最初被渲染时，仅需提供一个监听器。
当使用 ES6 class 定义一个组件，一个常见的模式是一个事件处理器在类中是一个方法。例如，toggle 组件渲染让用户在 ON 和 OFF 之间切换的按钮：
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// 此绑定是必需的，让 `this` 在回调里生效
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')
);
在JSX回调中，你必须注意 this 的指向。在 Javascript中，类方法没有被默认绑定。如果你没有绑定 this.handleClick 并把它传递到 onClick，则函数被实际调用时，this 将会是 undefined。
这不是 React 特有的行为；这是Javascript中函数如何工作的一部份，通常，如果在它后面提供一个没有 () 方法，像onClick={this.handleClick}，你就应该绑定（ bind） 该方法。
如果你不想调用 bind ，有两种方式能解决它。如果使用试验性 public class fields syntax，可以用类字段正确的绑定回调：
class LoggingButton extends React.Component {
// 这个语法确保 `this` 被绑定在handleClick中
// 警告: 这是 *试验性* 语法
handleClick = () => {
console.log('this is:', this);
}
render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}
此语法在创建 React APP 中是默认开启的。
如果不用类字段语法，也可以在回调中庸一个箭头函数：
class LoggingButton extends React.Component {
handleClick() {
console.log('this is:', this);
}
render() {
// 这个语法确保 `this` 被绑定在handleClick中
return (
<button onClick={(e) => this.handleClick(e)}>
Click me
</button>
);
}
}
这个语法的问题是每次 LoggingButton 渲染时都会创建一个不同的回调。大多数情况下，这没问题。但是，如果回调被当作 prop 传递给子组件，这些组件可能做额外重复渲染。我们通常推荐绑定在构造函数中或者使用类字段语法，避免这种性能问题。
将实参传递给事件处理器
在循环内部，通常想把额外的形参传递给事件处理器。列如，如果 id 是行ID，以下二者都可以工作：
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
上面二行是等价的，使用 箭头函数 和 Function.prototype.bind
在这两者情况下，e 实参表示 React 事件将作为ID后第二个实参传递。使用箭头函数，我们必须传递它，但是用 bind 绑定的任何的参数会被自动的转发。
