摘要：如果你使用實(shí)驗(yàn)性屬性初始化語(yǔ)法，你能用這方法來(lái)正確綁定回調(diào)函數(shù)的綁定這語(yǔ)法在中默認(rèn)支持。然而，如果這回調(diào)函數(shù)是作為一個(gè)傳遞到更下一級(jí)的組件中的時(shí)候，些組件可能會(huì)做一個(gè)額外的重新渲染。

下面是react官方文檔的個(gè)人翻譯，如有翻譯錯(cuò)誤，請(qǐng)多多指出
原文地址：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:
但有一下一些語(yǔ)法不同：
React events are named using camelCase, rather than lowercase.
React事件使用駝峰式命名的，而不是全小寫(xiě)。

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

For example, the HTML:
用HTML的話：

  Activate Lasers

is slightly different in React:
React不同的語(yǔ)法：

  Activate Lasers

Another difference is that you cannot return false to prevent default behavior in React.
另一個(gè)不同就是你不能返回false來(lái)阻止默認(rèn)事件。

You must call preventDefault explicitly.
你必須顯示地調(diào)用preventDefault。

For example, with plain HTML, to prevent the default link behavior of opening a new page, you can write:
舉個(gè)例子，如果用HTML，你能這樣寫(xiě)來(lái)阻止默認(rèn)的鏈接行為來(lái)打開(kāi)一個(gè)新的頁(yè)面：

  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定義這些合成事件是根據(jù)W3C標(biāo)準(zhǔn)的，所以你不需要擔(dān)心瀏覽器兼容問(wèn)題。學(xué)習(xí)更多的合成事件。

When using React you should generally not need to call addEventListener to add listeners to a DOM element after it is created.
當(dāng)你用React的時(shí)候，當(dāng)dom被創(chuàng)建的時(shí)候，你一般都不需要調(diào)用addEventListener來(lái)添加監(jiān)聽(tīng)器到dom上。
Instead, just provide a listener when the element is initially rendered.
相反，只需要添加一個(gè)監(jiān)聽(tīng)器當(dāng)元素最初被渲染。

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

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的會(huì)回調(diào)中的this的指向。
In JavaScript, class methods are not bound by default.
在JavsScript，類(lèi)方法不是默認(rèn)被綁定的。
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事件里，當(dāng)函數(shù)被調(diào)用的時(shí)候，this會(huì)返回undefined。

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

If calling bind annoys you, there are two ways you can get around this.
如果你被經(jīng)常要bind惹惱了，下面有兩種方式來(lái)幫你繞過(guò)他。
If you are using the experimental property initializer syntax, you can use property initializers to correctly bind callbacks:
如果你使用實(shí)驗(yàn)性屬性初始化語(yǔ)法，你能用這方法來(lái)正確綁定回調(diào)函數(shù)的綁定:

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.
這語(yǔ)法在Create React App中默認(rèn)支持。

If you aren"t using property initializer syntax, you can use an arrow function in the callback:
如果你沒(méi)有用這種屬性初始化語(yǔ)法，你能用箭頭函數(shù)來(lái)處理回調(diào)函數(shù)：

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
      
    );
  }
}

打開(kāi)試試
The problem with this syntax is that a different callback is created each time the LoggingButton renders.
這種語(yǔ)法的問(wèn)題是,每次LoggingButton渲染的時(shí)候都會(huì)創(chuàng)建一個(gè)不同的回調(diào)。

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

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

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