【譯】Handling Events

下面是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的話：

<button onclick="activateLasers()">
  Activate Lasers
</button>

is slightly different in React:
React不一樣的語法：

<button onClick={activateLasers}>
  Activate Lasers
</button>

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，你能這樣寫來阻止默認的連接行爲來打開一個新的頁面：

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

In React, this could instead be:
在React, 咱們要這樣作：

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

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

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 (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  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 (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

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 (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}

打開試試
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或者用屬性初始化語法來避免這種性能問題。