本文是本人自己辛苦翻譯的，請轉(zhuǎn)載的朋友注明，翻譯于Z.MJun的簡書 ，感謝！<翻譯不容易啊>

翻譯于2017年6月26日，原文

處理事件的React元素，與DOM元素處理事件相似。

• React 事件使用駝峰式命名，不要使用全小寫。
• 使用JSX來傳一個事件執(zhí)行函數(shù)，不要使用字符串。
  HTML的樣式如下：

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

在React使用以下方法

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

另一個不同點，在react中不能使用返回false。必須調(diào)用preventDefault。Html如下：

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

React如下：

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

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

這里的e是一個虛擬的事件。React定義的這些虛擬的事件滿足W3C spec。所以不需要擔(dān)心瀏覽器兼容問題。想了解更多查看SyntheticEvent
。

當(dāng)使用React的時候，不需要如DOM元素調(diào)用addEventListener方法添加監(jiān)聽者。只需要，在初始化渲染的時候提供一個監(jiān)聽者。

當(dāng)使用ES6類來定義一個組件，常見的模式是將事件處理程序作為類中的一個方法。如，Toggle組件渲染一個按鍵，會讓用戶切換ON或者OFF狀態(tài)：

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

Try it on CodePen.
在JSX的回調(diào)，this的含義需要反復(fù)理解。在JS里面，類方法中沒有默認(rèn)綁定。如果你忘記了綁定this.handleClick，和點擊onClick，this將會警告未定義。

這個并不是React特有的行為。這是JS的函數(shù)的一部分。一般來說，如果你是一個沒有()方法后，如onclick = {this.handleclick }，你應(yīng)該綁定方法。

可以使用以下兩個方法來綁定時間。如果使用初始化綁定（property initializer syntax），可以使用初始化的屬性來綁定回調(diào)方法。

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

這個語法是默認(rèn)能用在Create React App下的。
如果你不想使用這個方法，還可以使用回調(diào)中動態(tài)加載方法。

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

這個語法問題，不同的回調(diào)被創(chuàng)建每個時間點來表達(dá)LoggingButton。多數(shù)情況下，都可以的。但是，如果這個回調(diào)是要穿個低級的組件，這些組件就需要創(chuàng)建額外的重新渲染。比較推薦在constructor綁定或者使用初始化定義，來避免這個實現(xiàn)問題。