下面是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或许用属性初始化语法来防止这类机能题目。