摘要：如果你使用實驗性屬性初始化語法，你能用這方法來正確綁定回調函數的綁定這語法在中默認支持。然而，如果這回調函數是作為一個傳遞到更下一級的組件中的時候，些組件可能會做一個額外的重新渲染。

下面是react官方文檔的個人翻譯，如有翻譯錯誤，請多多指出
原文地址：https://facebook.github.io/re...

Handling events with React elements is very similar to handling events on DOM elements.
處理React元素事件跟處理DOM元素事件很相似
There are some syntactic differences:
但有一下一些語法不同：
React events are named using camelCase, rather than lowercase.
React事件使用駝峰式命名的，而不是全小寫。

With JSX you pass a function as the event handler, rather than a string.
JSX里你要傳遞函數給事件處理，而不是字符串

For example, the HTML:
用HTML的話：

  Activate Lasers

is slightly different in React:
React不同的語法：

  Activate Lasers

Another difference is that you cannot return false to prevent default behavior in React.
另一個不同就是你不能返回false來阻止默認事件。

You must call preventDefault explicitly.
你必須顯示地調用preventDefault。

For example, with plain HTML, to prevent the default link behavior of opening a new page, you can write:
舉個例子，如果用HTML，你能這樣寫來阻止默認的鏈接行為來打開一個新的頁面：

  Click me

In React, this could instead be:
在React, 我們要這樣做：

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log("The link was clicked.");
  }

  return (
    
      Click me
    
  );
}

Here, e is a synthetic event.
這里的e是合成事件。

React defines these synthetic events according to the W3C spec, so you don"t need to worry about cross-browser compatibility. See the SyntheticEvent reference guide to learn more.
React定義這些合成事件是根據W3C標準的，所以你不需要擔心瀏覽器兼容問題。學習更多的合成事件。

When using React you should generally not need to call addEventListener to add listeners to a DOM element after it is created.
當你用React的時候，當dom被創建的時候，你一般都不需要調用addEventListener來添加監聽器到dom上。
Instead, just provide a listener when the element is initially rendered.
相反，只需要添加一個監聽器當元素最初被渲染。

When you define a component using an ES6 class, a common pattern is for an event handler to be a method on the class.
當你用es6的class定義一個組件的時候，一個通常的模式是在class上把事件處理定義一個方法。
For example, this Toggle component renders a button that lets the user toggle between "ON" and "OFF" states:
舉個例子，Toggle組件渲染一個能讓用于切換開關的按鈕:

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(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      
        {this.state.isToggleOn ? "ON" : "OFF"}
      
    );
  }
}

ReactDOM.render(
  ,
  document.getElementById("root")
);

You have to be careful about the meaning of this in JSX callbacks.
你必須留意一下JSX的會回調中的this的指向。
In JavaScript, class methods are not bound by default.
在JavsScript，類方法不是默認被綁定的。
If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called.
如果你忘了綁定this.handleClick并且傳遞到onClick事件里，當函數被調用的時候，this會返回undefined。

This is not React-specific behavior; it is a part of how functions work in JavaScript.
這不是React特定的行為，這是Javascript中函數怎么工作的一部分。
Generally, if you refer to a method without () after it, such as onClick={this.handleClick}, you should bind that method.
通常來講，如果你指向一個方法沒有()跟在后面，例如onClick={this.handleClick},你應該綁定這方法。

If calling bind annoys you, there are two ways you can get around this.
如果你被經常要bind惹惱了，下面有兩種方式來幫你繞過他。
If you are using the experimental property initializer syntax, you can use property initializers to correctly bind callbacks:
如果你使用實驗性屬性初始化語法，你能用這方法來正確綁定回調函數的綁定:

class LoggingButton extends React.Component {
  // This syntax ensures `this` is bound within handleClick.
  // Warning: this is *experimental* syntax.
  handleClick = () => {
    console.log("this is:", this);
  }

  render() {
    return (
      
        Click me
      
    );
  }
}

This syntax is enabled by default in Create React App.
這語法在Create React App中默認支持。

If you aren"t using property initializer syntax, you can use an arrow function in the callback:
如果你沒有用這種屬性初始化語法，你能用箭頭函數來處理回調函數：

class LoggingButton extends React.Component {
  handleClick() {
    console.log("this is:", this);
  }

  render() {
    // This syntax ensures `this` is bound within handleClick
    return (
       this.handleClick(e)}>
        Click me
      
    );
  }
}

打開試試
The problem with this syntax is that a different callback is created each time the LoggingButton renders.
這種語法的問題是,每次LoggingButton渲染的時候都會創建一個不同的回調。

In most cases, this is fine.
在大多數情況下還好。

However, if this callback is passed as a prop to lower components, those components might do an extra re-rendering.
然而，如果這回調函數是作為一個props傳遞到更下一級的組件中的時候，些組件可能會做一個額外的重新渲染。

We generally recommend binding in the constructor or using the property initializer syntax, to avoid this sort of performance problem.
通常我們會要求在constructor或者用屬性初始化語法來避免這種性能問題。