React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同 React 事件的命名采用小驼峰式（camelCase），而不是纯小写

1、React阻止默认行为的传递

在 React 中不能通过返回 false 的方式阻止默认行为。必须显式的使用 preventDefault 。
传统的 HTML 中阻止链接默认打开一个新页面

A.HTML中的做法

  1. <a href="#" onclick="console.log('The link was clicked.'); return false">
  2.   Click me
  3. </a>

B.React中的做法

e 是React 根据 W3C 规范来定义的一个合成事件。

  1. function ActionLink() {
  2.   function handleClick(e) {
  3.     e.preventDefault();
  4.     console.log('The link was clicked.');
  5.   }
  7.   return (
  8.     <a href="#" onClick={handleClick}>
  9.       Click me
  10.     </a>
  11.   );
  12. }

2、React事件绑定至当前this对象

在 JavaScript 中，class 的方法默认不会绑定 this。如果未绑定 this.handleClick 并把它传入了 onClick，当调用这个函数的时候 this 的值为 undefined。

A.在构造函数中进行绑定

this.handleClick = this.handleClick.bind(this);

  1. class Toggle extends React.Component {
  2.   constructor(props) {
  3.     super(props);
  4.     this.state = {isToggleOn: true};
  6.     // 为了在回调中使用 `this`，这个绑定是必不可少的
  7.     this.handleClick = this.handleClick.bind(this);
  8.   }
  10.   handleClick() {
  11.     this.setState(state => ({
  12.       isToggleOn: !state.isToggleOn
  13.     }));
  14.   }
  16.   render() {
  17.     return (
  18.       <button onClick={this.handleClick}>
  19.         {this.state.isToggleOn ? 'ON' : 'OFF'}
  20.       </button>
  21.     );
  22.   }
  23. }
  25. ReactDOM.render(
  26.   <Toggle />,
  27.   document.getElementById('root')
  28. );

B. public class fields 语法

handleClick = () => {}

  1. class LoggingButton extends React.Component {
  2.   // 此语法确保 `handleClick` 内的 `this` 已被绑定。
  3.   // 注意: 这是 *实验性* 语法。
  4.   handleClick = () => {
  5.     console.log('this is:', this);
  6.   }
  8.   render() {
  9.     return (
  10.       <button onClick={this.handleClick}>
  11.         Click me
  12.       </button>
  13.     );
  14.   }
  15. }

C.在回调中使用箭头函数进行绑定

onClick={(e) => this.handleClick(e)}

  1. class LoggingButton extends React.Component {
  2.   handleClick() {
  3.     console.log('this is:', this);
  4.   }
  6.   render() {
  7.     // 此语法确保 `handleClick` 内的 `this` 已被绑定。
  8.     return (
  9.       <button onClick={(e) => this.handleClick(e)}>
  10.         Click me
  11.       </button>
  12.     );
  13.   }
  14. }

3、向事件处理函数传递参数

通过箭头函数和 [Function.prototype.bind](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) 来实现。

  1. <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
  2. <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

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