docs(cn): translate docs/handling-events #84

Ryanhui · 2019-02-09T11:50:32Z

No description provided.

yuqingc · 2019-02-13T01:47:26Z

content/docs/handling-events.md

 permalink: docs/handling-events.html
 prev: state-and-lifecycle.html
 next: conditional-rendering.html
 redirect_from:
  - "docs/events-ko-KR.html"
 ---

-Handling events with React elements is very similar to handling events on DOM elements. There are some syntactic differences:
+React 元素的事件处理和 DOM元素的很相似，但是有一点语法上的不同:


Suggested change

React 元素的事件处理和 DOM元素的很相似，但是有一点语法上的不同:

React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同:

yuqingc · 2019-02-13T01:48:30Z

content/docs/handling-events.md


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

-is slightly different in React:
+在React 中有些略微不同：


Suggested change

在React 中有些略微不同：

在 React 中有些略微不同：

yuqingc · 2019-02-13T01:48:46Z

content/docs/handling-events.md


 ```js{1}
 <button onClick={activateLasers}>
  Activate Lasers
 </button>
 ```

-Another difference is that you cannot return `false` to prevent default behavior in React. You must call `preventDefault` explicitly. For example, with plain HTML, to prevent the default link behavior of opening a new page, you can write:
+在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为。你必须明确的使用 preventDefault。例如，传统的 HTML 中阻止链接默认打开一个新页面，你可以这样写：


Suggested change

在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为。你必须明确的使用 preventDefault。例如，传统的 HTML 中阻止链接默认打开一个新页面，你可以这样写：

在 React 中另一个不同是你不能使用返回 `false` 的方式阻止默认行为。你必须明确的使用 preventDefault。例如，传统的 HTML 中阻止链接默认打开一个新页面，你可以这样写：

我觉得 explicitly 为 “显式的” 好一些

yuqingc · 2019-02-13T01:55:10Z

content/docs/handling-events.md


-## Passing Arguments to Event Handlers
+## 向事件处理程序传递参数


你这里翻译成事件处理程序，上面有的翻译成事件处理器，有的翻译成事件处理函数。需要统一一下

yuqingc · 2019-02-13T01:57:05Z

content/docs/handling-events.md


-If calling `bind` annoys you, there are two ways you can get around this. If you are using the experimental [public class fields syntax](https://babeljs.io/docs/plugins/transform-class-properties/), you can use class fields to correctly bind callbacks:
+如果觉得使用 `bind` 很麻烦，这里有两种方式可以解决。 如果你正在使用实验性的[公有类字段语法](https://babeljs.io/docs/plugins/transform-class-properties/)，你可以使用类字段正确的绑定回调函数：


根据术语表，class 可以不翻译

netlify · 2019-02-13T09:01:34Z

Deploy preview for cn-reactjs ready!

Built with commit 3f312e8

https://deploy-preview-84--cn-reactjs.netlify.com

LeoEatle · 2019-02-18T03:47:41Z

content/docs/handling-events.md

-* React events are named using camelCase, rather than lowercase.
-* With JSX you pass a function as the event handler, rather than a string.
+* React 事件的命名采用驼峰式，而不是小写。
+* 采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串。


Suggested change

* 采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串。

* 采用 JSX 的语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

QC-L · 2019-02-26T09:22:23Z

content/docs/handling-events.md


-* React events are named using camelCase, rather than lowercase.
-* With JSX you pass a function as the event handler, rather than a string.
+* React 事件的命名采用驼峰式，而不是小写。


Suggested change

* React 事件的命名采用驼峰式，而不是小写。

* React 事件的命名采用小驼峰式（camelCase），而不是纯小写。

QC-L · 2019-02-26T09:22:59Z

content/docs/handling-events.md

-* React events are named using camelCase, rather than lowercase.
-* With JSX you pass a function as the event handler, rather than a string.
+* React 事件的命名采用驼峰式，而不是小写。
+* 采用 JSX 的语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。


Suggested change

* 采用 JSX 的语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

* 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

QC-L · 2019-02-26T09:24:48Z

content/docs/handling-events.md


 ```js{1}
 <button onClick={activateLasers}>
  Activate Lasers
 </button>
 ```

-Another difference is that you cannot return `false` to prevent default behavior in React. You must call `preventDefault` explicitly. For example, with plain HTML, to prevent the default link behavior of opening a new page, you can write:
+在 React 中另一个不同是你不能使用返回 `false` 的方式阻止默认行为。你必须显式的使用 preventDefault 。例如，传统的 HTML 中阻止链接默认打开一个新页面，你可以这样写：


Suggested change

在 React 中另一个不同是你不能使用返回 `false` 的方式阻止默认行为。你必须显式的使用 preventDefault 。例如，传统的 HTML 中阻止链接默认打开一个新页面，你可以这样写：

在 React 中另一个不同点是你不能通过返回 `false` 的方式阻止默认行为。你必须显式的使用 preventDefault。例如，传统的 HTML 中阻止链接默认打开一个新页面，你可以这样写：

QC-L · 2019-02-26T09:25:27Z

content/docs/handling-events.md


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

-In React, this could instead be:
+在 React，应该这样来写：


Suggested change

在 React，应该这样来写：

在 React 中，可能是这样的：

QC-L · 2019-02-26T09:26:52Z

content/docs/handling-events.md

@@ -54,19 +54,19 @@ function ActionLink() {
 }
 ```

-Here, `e` is a synthetic event. React defines these synthetic events according to the [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/), so you don't need to worry about cross-browser compatibility. See the [`SyntheticEvent`](/docs/events.html) reference guide to learn more.
+在这里，`e` 是一个合成事件。React 根据 [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/) 来定义这些合成事件，所以你不需要担心跨浏览器的兼容性问题。 如果想了解更多，请查看 [`SyntheticEvent`](/docs/events.html) 参考指南。


Suggested change

在这里，`e` 是一个合成事件。React 根据 [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/) 来定义这些合成事件，所以你不需要担心跨浏览器的兼容性问题。如果想了解更多，请查看 [`SyntheticEvent`](/docs/events.html) 参考指南。

在这里，`e` 是一个合成事件。React 根据 [W3C 规范](https://www.w3.org/TR/DOM-Level-3-Events/)来定义这些合成事件，所以你不需要担心跨浏览器的兼容性问题。如果想了解更多，请查阅 [`SyntheticEvent`](/docs/events.html) 参考指南。

QC-L · 2019-02-26T09:28:51Z

content/docs/handling-events.md


-When using React you should generally not need to call `addEventListener` to add listeners to a DOM element after it is created. Instead, just provide a listener when the element is initially rendered.
+使用 React 时你一般不需要使用 `addEventListener` 为一个已创建的 DOM 元素添加监听器。你仅仅需要在这个元素初始渲染的时候提供一个监听器。


Suggested change

使用 React 时你一般不需要使用 `addEventListener` 为一个已创建的 DOM 元素添加监听器。你仅仅需要在这个元素初始渲染的时候提供一个监听器。

使用 React 时，一般不需要使用 `addEventListener` 为已创建的 DOM 元素添加监听器。React恰恰与之相反，你仅需要在该元素初始渲染的时候添加一个监听器。

QC-L · 2019-02-26T09:30:44Z

content/docs/handling-events.md


-When you define a component using an [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes), a common pattern is for an event handler to be a method on the class. For example, this `Toggle` component renders a button that lets the user toggle between "ON" and "OFF" states:
+当你使用 [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) 语法定义一个组件的时候，通常的做法是使事件处理函数成为 class 中的一个方法。例如，下面的 `Toggle` 组件渲染一个让用户切换开关状态的按钮：


Suggested change

当你使用 [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) 语法定义一个组件的时候，通常的做法是使事件处理函数成为 class 中的一个方法。例如，下面的 `Toggle` 组件渲染一个让用户切换开关状态的按钮：

当你使用 [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) 语法定义一个组件的时候，通常的做法是将事件处理函数声明为 class 中的方法。例如，下面的 `Toggle` 组件会渲染一个让用户切换开关状态的按钮：

QC-L · 2019-02-26T09:31:10Z

content/docs/handling-events.md

@@ -91,18 +91,18 @@ ReactDOM.render(
 );
 ```

-[**Try it on CodePen**](http://codepen.io/gaearon/pen/xEmzGg?editors=0010)
+[**在 CodePen 上试试**](http://codepen.io/gaearon/pen/xEmzGg?editors=0010)


Suggested change

[**在 CodePen 上试试**](http://codepen.io/gaearon/pen/xEmzGg?editors=0010)

[**在 CodePen 上尝试**](http://codepen.io/gaearon/pen/xEmzGg?editors=0010)

后面与之相同

QC-L · 2019-02-26T09:32:33Z

content/docs/handling-events.md


-You have to be careful about the meaning of `this` in JSX callbacks. In JavaScript, class methods are not [bound](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind) by default. If you forget to bind `this.handleClick` and pass it to `onClick`, `this` will be `undefined` when the function is actually called.
+你必须谨慎对待 JSX 回调函数中的 `this`， 在 JavaScript 中， class 的方法默认是不会[绑定](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind) `this` 的。如果你忘记绑定 `this.handleClick` 并把它传入了 `onClick`，当你调用这个函数的时候 `this` 会是 `undefined`。


Suggested change

你必须谨慎对待 JSX 回调函数中的 `this`，在 JavaScript 中， class 的方法默认是不会[绑定](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind) `this` 的。如果你忘记绑定 `this.handleClick` 并把它传入了 `onClick`，当你调用这个函数的时候 `this` 会是 `undefined`。

你必须谨慎对待 JSX 回调函数中的 `this`，在 JavaScript 中，class 的方法默认不会[绑定](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind) `this`。如果你忘记绑定 `this.handleClick` 并把它传入了 `onClick`，当你调用这个函数的时候 `this` 的值为 `undefined`。

QC-L · 2019-02-26T09:33:55Z

content/docs/handling-events.md


-This is not React-specific behavior; it is a part of [how functions work in JavaScript](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/). Generally, if you refer to a method without `()` after it, such as `onClick={this.handleClick}`, you should bind that method.
+这并不是 React 的特殊行为；它是[函数如何在 JavaScript 中运行](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/)的一部分。通常情况下，如果你没有在方法后面添加 `()`，例如 `onClick={this.handleClick}`，你应该为这个方法绑定 `this`。


Suggested change

这并不是 React 的特殊行为；它是[函数如何在 JavaScript 中运行](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/)的一部分。通常情况下，如果你没有在方法后面添加 `()`，例如 `onClick={this.handleClick}`，你应该为这个方法绑定 `this`。

这并不是 React 的特殊行为；这其实与[函数在 JavaScript 中工作原理](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/)有关。通常情况下，如果你没有在方法后面添加 `()`，例如 `onClick={this.handleClick}`，你应该为这个方法绑定 `this`。

QC-L · 2019-02-26T09:35:25Z

content/docs/handling-events.md


-If calling `bind` annoys you, there are two ways you can get around this. If you are using the experimental [public class fields syntax](https://babeljs.io/docs/plugins/transform-class-properties/), you can use class fields to correctly bind callbacks:
+如果觉得使用 `bind` 很麻烦，这里有两种方式可以解决。 如果你正在使用实验性的[公有类字段语法](https://babeljs.io/docs/plugins/transform-class-properties/)，你可以使用类字段正确的绑定回调函数：


Suggested change

如果觉得使用 `bind` 很麻烦，这里有两种方式可以解决。如果你正在使用实验性的[公有类字段语法](https://babeljs.io/docs/plugins/transform-class-properties/)，你可以使用类字段正确的绑定回调函数：

如果觉得使用 `bind` 很麻烦，这里有两种方式可以解决。如果你正在使用实验性的 [public class fields 语法](https://babeljs.io/docs/plugins/transform-class-properties/)，你可以使用 class fileds 正确的绑定回调函数：

QC-L · 2019-02-26T09:36:06Z

content/docs/handling-events.md


-If you aren't using class fields syntax, you can use an [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) in the callback:
+如果你没有使用 class 字段语法，你可以在回调函数中使用[箭头函数](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions)：


Suggested change

如果你没有使用 class 字段语法，你可以在回调函数中使用[箭头函数](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions)：

如果你没有使用 class fileds 语法，你可以在回调函数中使用[箭头函数](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions)：

QC-L · 2019-02-26T09:39:40Z

content/docs/handling-events.md

@@ -138,17 +138,17 @@ class LoggingButton extends React.Component {
 }
 ```

-The problem with this syntax is that a different callback is created each time the `LoggingButton` renders. 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. We generally recommend binding in the constructor or using the class fields syntax, to avoid this sort of performance problem.
+使用这个语法有个问题就是每次 `LoggingButton` 渲染的时候都会创建一个不同的回调函数。在大多数情况下，这没有问题。然而如果这个回调函数作为一个属性值传入低阶组件，这些组件可能会进行额外的重新渲染。我们通常建议在构造器中绑定或使用类字段语法来避免这类性能问题。


Suggested change

使用这个语法有个问题就是每次 `LoggingButton` 渲染的时候都会创建一个不同的回调函数。在大多数情况下，这没有问题。然而如果这个回调函数作为一个属性值传入低阶组件，这些组件可能会进行额外的重新渲染。我们通常建议在构造器中绑定或使用类字段语法来避免这类性能问题。

此语法问题在于每次渲染 `LoggingButton` 时都会创建不同的回调函数。在大多数情况下，这没什么问题，但如果该回调函数作为 prop 传入子组件时，这些组件可能会进行额外的重新渲染。我们通常建议在构造器中绑定或使用 class fileds 语法来避免这类性能问题。

QC-L · 2019-02-26T09:40:34Z

content/docs/handling-events.md


 ```js
 <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
 <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
 ```

-The above two lines are equivalent, and use [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) and [`Function.prototype.bind`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) respectively.
+上述两种方式是等价的，分别通过 [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) 和 [`Function.prototype.bind`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) 来为事件处理函数传递参数。


Suggested change

上述两种方式是等价的，分别通过 [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) 和 [`Function.prototype.bind`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) 来为事件处理函数传递参数。

上述两种方式是等价的，分别通过[箭头函数](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) 和 [`Function.prototype.bind`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) 来为事件处理函数传递参数。

QC-L · 2019-02-26T09:42:23Z

content/docs/handling-events.md


-In both cases, the `e` argument representing the React event will be passed as a second argument after the ID. With an arrow function, we have to pass it explicitly, but with `bind` any further arguments are automatically forwarded.
+上面两个例子中，参数 `e` 作为 React 事件对象将会被作为第二个参数进行传递。通过箭头函数的方式，事件对象必须显式的进行传递，但是通过 `bind` 的方式，事件对象以及更多的参数将会被隐式的进行传递。


Suggested change

上面两个例子中，参数 `e` 作为 React 事件对象将会被作为第二个参数进行传递。通过箭头函数的方式，事件对象必须显式的进行传递，但是通过 `bind` 的方式，事件对象以及更多的参数将会被隐式的进行传递。

在这两种情况下，参数 `e` 都表示为 React 的事件对象，并作为 ID 后的第二个参数传递。通过箭头函数的方式，事件对象必须显式传递，但是通过 `bind` 的方式，事件对象以及更多的参数将会被隐式传递。

QC-L · 2019-02-26T09:46:04Z

@Ryanhui 修改下~

netlify · 2019-02-26T09:52:24Z

Deploy preview for zh-hans-reactjs ready!

Built with commit 3f312e8

https://deploy-preview-84--zh-hans-reactjs.netlify.com

…i/zh-hans.reactjs.org into translate-Handling-Events

hijiangtao

以上细节确认后便可 merge。

content/docs/handling-events.md

hijiangtao · 2019-02-26T14:29:22Z

content/docs/handling-events.md

@@ -117,9 +117,9 @@ class LoggingButton extends React.Component {
 }
 ```

-This syntax is enabled by default in [Create React App](https://github.com/facebookincubator/create-react-app).
+这个语法在 [Create React App](https://github.com/facebookincubator/create-react-app) 中默认开启。


[Create React App](https://github.com/facebookincubator/create-react-app) 默认启用此语法。

content/docs/handling-events.md

…i/zh-hans.reactjs.org into translate-Handling-Events

QC-L · 2019-02-28T01:55:08Z

content/docs/handling-events.md


-In both cases, the `e` argument representing the React event will be passed as a second argument after the ID. With an arrow function, we have to pass it explicitly, but with `bind` any further arguments are automatically forwarded.
+在这两种情况下，参数 `e` 会作为 React 的事件对象被作为第二个参数传递。通过箭头函数的方式，事件对象必须显式的进行传递，但是通过 `bind` 的方式，事件对象以及更多的参数将会被隐式的进行传递。


Suggested change

在这两种情况下，参数 `e` 会作为 React 的事件对象被作为第二个参数传递。通过箭头函数的方式，事件对象必须显式的进行传递，但是通过 `bind` 的方式，事件对象以及更多的参数将会被隐式的进行传递。

在这两种情况下，React 的事件对象 `e` 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 `bind` 的方式，事件对象以及更多的参数将会被隐式的进行传递。

改了下说法，读着会更连贯一些

translate handling-events

2cc53a0

QC-L added the Pending Review 已翻译，待校对阶段 label Feb 12, 2019

yuqingc requested changes Feb 13, 2019

View reviewed changes

modify handling-events.md

9e217c8

QC-L mentioned this pull request Feb 14, 2019

OLD CLAIMS #4

Closed

hijiangtao mentioned this pull request Feb 15, 2019

[READ ONLY] Translation Check Sheet #98

Closed

LeoEatle previously approved these changes Feb 18, 2019

View reviewed changes

QC-L added Pending Modify 已校对，待修改阶段 and removed Pending Review 已翻译，待校对阶段 labels Feb 18, 2019

modify

1add2e6

Ryanhui dismissed LeoEatle’s stale review via 1add2e6 February 19, 2019 08:57

not translate class

1e547bd

LeoEatle previously approved these changes Feb 20, 2019

View reviewed changes

QC-L reviewed Feb 26, 2019

View reviewed changes

Merge branch 'master' into translate-Handling-Events

b04d6db

QC-L dismissed LeoEatle’s stale review via b04d6db February 26, 2019 09:47

Ryanhui and others added 3 commits February 26, 2019 18:01

modify

425b56b

Merge branch 'translate-Handling-Events' of https://github.com/Ryanhu…

b253a07

…i/zh-hans.reactjs.org into translate-Handling-Events

fix: code pen

9bf8a1a

QC-L previously approved these changes Feb 26, 2019

View reviewed changes

hijiangtao requested changes Feb 26, 2019

View reviewed changes

Ryanhui added 2 commits February 27, 2019 21:55

modify

cadaec8

Merge branch 'translate-Handling-Events' of https://github.com/Ryanhu…

0dd75af

…i/zh-hans.reactjs.org into translate-Handling-Events

Ryanhui dismissed QC-L’s stale review via 0dd75af February 27, 2019 13:56

QC-L reviewed Feb 28, 2019

View reviewed changes

modify

3f312e8

QC-L approved these changes Feb 28, 2019

View reviewed changes

QC-L changed the title ~~translate handling-events~~ docs(cn): translate docs/handling-events Feb 28, 2019

hijiangtao approved these changes Feb 28, 2019

View reviewed changes

hijiangtao merged commit 287e774 into reactjs:master Feb 28, 2019

Ryanhui deleted the translate-Handling-Events branch February 28, 2019 09:31

OhIAmFine pushed a commit to OhIAmFine/zh-hans.reactjs.org that referenced this pull request May 6, 2019

docs(cn): translate docs/handling-events (reactjs#84)

52e4619

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs(cn): translate docs/handling-events #84

docs(cn): translate docs/handling-events #84

Ryanhui commented Feb 9, 2019

yuqingc Feb 13, 2019

yuqingc Feb 13, 2019

yuqingc Feb 13, 2019

yuqingc Feb 13, 2019

yuqingc Feb 13, 2019

yuqingc Feb 13, 2019

netlify bot commented Feb 13, 2019 •

edited

Loading

LeoEatle Feb 18, 2019

QC-L Feb 26, 2019

QC-L Feb 26, 2019

QC-L Feb 26, 2019

QC-L Feb 26, 2019 •

edited

Loading

QC-L Feb 26, 2019

QC-L Feb 26, 2019

QC-L Feb 26, 2019

QC-L Feb 26, 2019

QC-L Feb 26, 2019

QC-L Feb 26, 2019

QC-L Feb 26, 2019

QC-L Feb 26, 2019

QC-L Feb 26, 2019

QC-L Feb 26, 2019

QC-L Feb 26, 2019

QC-L Feb 26, 2019 •

edited

Loading

QC-L commented Feb 26, 2019

netlify bot commented Feb 26, 2019 •

edited

Loading

hijiangtao left a comment

hijiangtao Feb 26, 2019

QC-L Feb 28, 2019

QC-L Feb 28, 2019

	React 元素的事件处理和 DOM元素的很相似，但是有一点语法上的不同:
	React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同:

	在React 中有些略微不同：
	在 React 中有些略微不同：

	在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为。你必须明确的使用 preventDefault。例如，传统的 HTML 中阻止链接默认打开一个新页面，你可以这样写：
	在 React 中另一个不同是你不能使用返回 `false` 的方式阻止默认行为。你必须明确的使用 preventDefault。例如，传统的 HTML 中阻止链接默认打开一个新页面，你可以这样写：


		## Passing Arguments to Event Handlers
		## 向事件处理程序传递参数


		If calling `bind` annoys you, there are two ways you can get around this. If you are using the experimental [public class fields syntax](https://babeljs.io/docs/plugins/transform-class-properties/), you can use class fields to correctly bind callbacks:
		如果觉得使用 `bind` 很麻烦，这里有两种方式可以解决。如果你正在使用实验性的[公有类字段语法](https://babeljs.io/docs/plugins/transform-class-properties/)，你可以使用类字段正确的绑定回调函数：

	* 采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串。
	* 采用 JSX 的语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

	* React 事件的命名采用驼峰式，而不是小写。
	* React 事件的命名采用小驼峰式（camelCase），而不是纯小写。

	* 采用 JSX 的语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。
	* 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

	在 React 中另一个不同是你不能使用返回 `false` 的方式阻止默认行为。你必须显式的使用 preventDefault 。例如，传统的 HTML 中阻止链接默认打开一个新页面，你可以这样写：
	在 React 中另一个不同点是你不能通过返回 `false` 的方式阻止默认行为。你必须显式的使用 preventDefault。例如，传统的 HTML 中阻止链接默认打开一个新页面，你可以这样写：

	在 React，应该这样来写：
	在 React 中，可能是这样的：

	在这里，`e` 是一个合成事件。React 根据 [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/) 来定义这些合成事件，所以你不需要担心跨浏览器的兼容性问题。如果想了解更多，请查看 [`SyntheticEvent`](/docs/events.html) 参考指南。
	在这里，`e` 是一个合成事件。React 根据 [W3C 规范](https://www.w3.org/TR/DOM-Level-3-Events/)来定义这些合成事件，所以你不需要担心跨浏览器的兼容性问题。如果想了解更多，请查阅 [`SyntheticEvent`](/docs/events.html) 参考指南。


		When using React you should generally not need to call `addEventListener` to add listeners to a DOM element after it is created. Instead, just provide a listener when the element is initially rendered.
		使用 React 时你一般不需要使用 `addEventListener` 为一个已创建的 DOM 元素添加监听器。你仅仅需要在这个元素初始渲染的时候提供一个监听器。

	使用 React 时你一般不需要使用 `addEventListener` 为一个已创建的 DOM 元素添加监听器。你仅仅需要在这个元素初始渲染的时候提供一个监听器。
	使用 React 时，一般不需要使用 `addEventListener` 为已创建的 DOM 元素添加监听器。React恰恰与之相反，你仅需要在该元素初始渲染的时候添加一个监听器。


		When you define a component using an [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes), a common pattern is for an event handler to be a method on the class. For example, this `Toggle` component renders a button that lets the user toggle between "ON" and "OFF" states:
		当你使用 [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) 语法定义一个组件的时候，通常的做法是使事件处理函数成为 class 中的一个方法。例如，下面的 `Toggle` 组件渲染一个让用户切换开关状态的按钮：

	[在 CodePen 上试试](http://codepen.io/gaearon/pen/xEmzGg?editors=0010)
	[在 CodePen 上尝试](http://codepen.io/gaearon/pen/xEmzGg?editors=0010)


		You have to be careful about the meaning of `this` in JSX callbacks. In JavaScript, class methods are not [bound](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind) by default. If you forget to bind `this.handleClick` and pass it to `onClick`, `this` will be `undefined` when the function is actually called.
		你必须谨慎对待 JSX 回调函数中的 `this`，在 JavaScript 中， class 的方法默认是不会[绑定](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind) `this` 的。如果你忘记绑定 `this.handleClick` 并把它传入了 `onClick`，当你调用这个函数的时候 `this` 会是 `undefined`。


		This is not React-specific behavior; it is a part of [how functions work in JavaScript](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/). Generally, if you refer to a method without `()` after it, such as `onClick={this.handleClick}`, you should bind that method.
		这并不是 React 的特殊行为；它是[函数如何在 JavaScript 中运行](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/)的一部分。通常情况下，如果你没有在方法后面添加 `()`，例如 `onClick={this.handleClick}`，你应该为这个方法绑定 `this`。

	这并不是 React 的特殊行为；它是[函数如何在 JavaScript 中运行](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/)的一部分。通常情况下，如果你没有在方法后面添加 `()`，例如 `onClick={this.handleClick}`，你应该为这个方法绑定 `this`。
	这并不是 React 的特殊行为；这其实与[函数在 JavaScript 中工作原理](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/)有关。通常情况下，如果你没有在方法后面添加 `()`，例如 `onClick={this.handleClick}`，你应该为这个方法绑定 `this`。


		If you aren't using class fields syntax, you can use an [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) in the callback:
		如果你没有使用 class 字段语法，你可以在回调函数中使用[箭头函数](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions)：

	如果你没有使用 class 字段语法，你可以在回调函数中使用[箭头函数](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions)：
	如果你没有使用 class fileds 语法，你可以在回调函数中使用[箭头函数](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions)：

docs(cn): translate docs/handling-events #84

docs(cn): translate docs/handling-events #84

Conversation

Ryanhui commented Feb 9, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

netlify bot commented Feb 13, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

QC-L Feb 26, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

QC-L Feb 26, 2019 • edited Loading

Choose a reason for hiding this comment

QC-L commented Feb 26, 2019

netlify bot commented Feb 26, 2019 • edited Loading

hijiangtao left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

netlify bot commented Feb 13, 2019 •

edited

Loading

QC-L Feb 26, 2019 •

edited

Loading

QC-L Feb 26, 2019 •

edited

Loading

netlify bot commented Feb 26, 2019 •

edited

Loading

	使用这个语法有个问题就是每次 `LoggingButton` 渲染的时候都会创建一个不同的回调函数。在大多数情况下，这没有问题。然而如果这个回调函数作为一个属性值传入低阶组件，这些组件可能会进行额外的重新渲染。我们通常建议在构造器中绑定或使用类字段语法来避免这类性能问题。
	此语法问题在于每次渲染 `LoggingButton` 时都会创建不同的回调函数。在大多数情况下，这没什么问题，但如果该回调函数作为 prop 传入子组件时，这些组件可能会进行额外的重新渲染。我们通常建议在构造器中绑定或使用 class fileds 语法来避免这类性能问题。

	上述两种方式是等价的，分别通过 [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) 和 [`Function.prototype.bind`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) 来为事件处理函数传递参数。
	上述两种方式是等价的，分别通过[箭头函数](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) 和 [`Function.prototype.bind`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) 来为事件处理函数传递参数。


		In both cases, the `e` argument representing the React event will be passed as a second argument after the ID. With an arrow function, we have to pass it explicitly, but with `bind` any further arguments are automatically forwarded.
		上面两个例子中，参数 `e` 作为 React 事件对象将会被作为第二个参数进行传递。通过箭头函数的方式，事件对象必须显式的进行传递，但是通过 `bind` 的方式，事件对象以及更多的参数将会被隐式的进行传递。

	上面两个例子中，参数 `e` 作为 React 事件对象将会被作为第二个参数进行传递。通过箭头函数的方式，事件对象必须显式的进行传递，但是通过 `bind` 的方式，事件对象以及更多的参数将会被隐式的进行传递。
	在这两种情况下，参数 `e` 都表示为 React 的事件对象，并作为 ID 后的第二个参数传递。通过箭头函数的方式，事件对象必须显式传递，但是通过 `bind` 的方式，事件对象以及更多的参数将会被隐式传递。


		In both cases, the `e` argument representing the React event will be passed as a second argument after the ID. With an arrow function, we have to pass it explicitly, but with `bind` any further arguments are automatically forwarded.
		在这两种情况下，参数 `e` 会作为 React 的事件对象被作为第二个参数传递。通过箭头函数的方式，事件对象必须显式的进行传递，但是通过 `bind` 的方式，事件对象以及更多的参数将会被隐式的进行传递。

	在这两种情况下，参数 `e` 会作为 React 的事件对象被作为第二个参数传递。通过箭头函数的方式，事件对象必须显式的进行传递，但是通过 `bind` 的方式，事件对象以及更多的参数将会被隐式的进行传递。
	在这两种情况下，React 的事件对象 `e` 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 `bind` 的方式，事件对象以及更多的参数将会被隐式的进行传递。