React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同:

• React 事件绑定属性的命名采用驼峰式写法，而不是小写。
• 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)

HTML 通常写法是：
<button onclick="activateLasers()">
  激活按钮
</button>
React 中写法为：
<button onClick={activateLasers}>
  激活按钮
</button>

• 在 React 中不能使用返回 false 的方式阻止默认行为， 必须明确的使用 preventDefault。

例如，通常我们在 HTML 中阻止链接默认打开一个新页面，可以这样写：

<a href="#" onclick="console.log('点击链接'); return false">
  点击
</a>
在 React 的写法为：
function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('链接被点击');
  }
 
  return (
    <a href="#" onClick={handleClick}>
      点击
    </a>
  );
}

• 类的方法默认是不会绑定 this 的。如果你忘记绑定 this.handleClick 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined。在ES6中通常使用箭头函数来避免这个问题。

class LoggingButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
    // 方法一：使用bind为了在回调中使用 `this`，这个绑定是必不可少的
    this.handleClick = this.handleClick.bind(this);
  }
  // 方法二：使用实验性的public class fields 语法，此语法确保 `handleClick` 内的 `this` 已被绑定。
  // 注意: 这是 *实验性* 语法。我通常使用此种方法。
  // create-react-app 默认启用此语法。
  // 如果没有使用 class fields 语法，可以在回调中使用箭头函数(方法三)

  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    // 方法一、方法二的return，使用方法三则不需要此部分
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
    // 方法三：此语法确保 `handleClick` 内的 `this` 已被绑定。
    return (
      <button onClick={(e) => this.handleClick(e)}>
        点击
      </button>
    );
  }
}

向事件处理程序传递参数

通常我们会为事件处理函数传递额外的参数。例如，若 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来实现。
在这两种情况下，React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。

值得注意的是，通过 bind 方式向监听函数传参，在类组件中定义的监听函数，事件对象 e 要排在所传递参数的后面

class Test extends React.Component{
    constructor(){
        super();
        this.state = {name:'Hello world!'};
    }
    
    testFunc(name, e){    //事件对象e要放在最后
        e.preventDefault();
        alert(name);
    }
    
    render(){
        return (
            <div>
                <p>hello</p>
                {/* 通过 bind() 方法传递参数。 */}
                <a href="#" onClick={this.testFunc.bind(this,this.state.name)}>Click</a>
            </div>
        );
    }
}