[Beta]: docs(cn): responding-to-events.md #635
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
QC-L
reviewed
Nov 3, 2021
QC-L
reviewed
Nov 3, 2021
QC-L
reviewed
Nov 3, 2021
QC-L
reviewed
Nov 3, 2021
QC-L
reviewed
Nov 3, 2021
QC-L
reviewed
Nov 3, 2021
Co-authored-by: QiChang Li <github@liqichang.com>
Co-authored-by: QiChang Li <github@liqichang.com>
QC-L
reviewed
Nov 11, 2021
Co-authored-by: QiChang Li <github@liqichang.com>
QC-L
reviewed
Nov 14, 2021
Co-authored-by: QiChang Li <github@liqichang.com>
QC-L
reviewed
Nov 15, 2021
QC-L
reviewed
Nov 21, 2021
QC-L
reviewed
Nov 21, 2021
QC-L
reviewed
Nov 21, 2021
QC-L
reviewed
Nov 21, 2021
QC-L
reviewed
Nov 21, 2021
QC-L
reviewed
Nov 21, 2021
QC-L
reviewed
Nov 21, 2021
QC-L
reviewed
Nov 21, 2021
QC-L
reviewed
Nov 21, 2021
QC-L
reviewed
Nov 21, 2021
QC-L
reviewed
Nov 21, 2021
QC-L
reviewed
Nov 21, 2021
Co-authored-by: QiChang Li <github@liqichang.com>
Co-authored-by: QiChang Li <github@liqichang.com>
QC-L
reviewed
Nov 21, 2021
QC-L
reviewed
Nov 21, 2021
Co-authored-by: QiChang Li <github@liqichang.com>
QC-L
reviewed
Nov 21, 2021
|
基本上看完了，最后两个问题完事就可以合并了 |
Co-authored-by: QiChang Li <github@liqichang.com>
|
@QC-L 大佬辛苦！ |
QC-L
approved these changes
Nov 21, 2021
|
你可以翻译其他的了，你也辛苦！ |
Closed
Neo42
reviewed
Dec 14, 2021
|
|
||
| > While there is no special syntax for event handlers, it is a convention to name them `handle` followed by the event handled. You'll often see `onClick={handleClick}`, `onMouseEnter={handleMouseEnter}`, and so on. | ||
| > 虽然事件处理函数没有专门的命名规则，但大家习惯以 `handle` 为前缀，后接事件名来进行命名。你经常会看到类似 `onClick={handleClick}` 、`onMouseEnter={handleMouseEnter}` 的命名等等。 |
There was a problem hiding this comment.
虽然事件处理函数没有特殊的语法，但大家习惯以 handle 为前缀，后接事件名来对它们进行命名。
special syntax 应该翻译成"特殊的语法"，“命名规则”的英文是“naming convention”
|
|
||
| Alternatively, you can define an event handler inline in the JSX: | ||
| 此外，你还可以在 JSX 中定义一个内联的事件处理函数： |
There was a problem hiding this comment.
alternatively 应该翻译为“或者”，”此外“的英文是 in addition 或者 besides
|
|
||
| In both cases, what you want to pass is a function: | ||
| 在这两种情况下，你要传递的是一个函数： |
There was a problem hiding this comment.
你都应该传递一个函数
you want to do 表示建议
|
|
||
| Because event handlers are declared inside of a component, they have access to the component's props. Here is a button that, when clicked, shows an alert with its `message` prop: | ||
| 由于事件处理函数是声明于组件内部，因此他们可以直接访问组件的 props。示例中的按钮，当点击时会弹出带有 `message` prop 的 alert： |
There was a problem hiding this comment.
“由于事件处理函数声明于组件内部”："是"多余，建议删掉
|
|
||
| Often you'll want the parent component to specify a child's event handler. Consider buttons: depending on where you're using a `Button` component, you might want to execute a different function—perhaps one plays a movie and another uploads an image. | ||
| 通常，我们会在父组件中定义子组件的事件处理函数。比如：置于不同位置的 `Button` 组件，可能最终执行的功能也不同 —— 也许是播放电影，也许是上传图片。 |
There was a problem hiding this comment.
建议改成 ”通常，你应该在父组件中定义子组件的事件处理函数“ 或者“通常，我们推荐你在父组件中定义子组件的事件处理函数”，因为 will want someone to do something 表示建议或推荐
perhaps one ... and another ... 应该翻译成“也许一个按钮...而另一个按钮...”
| @@ -460,22 +462,22 @@ function Button({ onClick, children }) { | |||
| } | |||
| ``` | |||
|
|
|||
| You could add more code to this handler before calling the parent `onClick` event handler, too. This pattern provides an *alternative* to propagation. It lets the child component handle the event, while also letting the parent component specify some additional behavior. Unlike propagation, it's not automatic. But the benefit of this pattern is that you can clearly follow the whole chain code that executes as a result of some event. | |||
| 你也可以在调用父元素 `onClick` 函数之前，向这个处理函数添加更多代码。此模式是事件传播的另一种 *替代方案* 。它让子组件处理事件，同时也让父组件指定一些额外的行为。与事件传播不同，它并非自动。但是使用这种模式的好处是，你可以清楚地追踪某个事件的结果，以及整个调用链的执行。 | |||
There was a problem hiding this comment.
“你可以清楚地追踪因某个事件的触发而执行的整条代码链”
句子的主干是 track the code chain，其余的都是定语
|
|
||
| * [`e.stopPropagation()`](https://developer.mozilla.org/docs/Web/API/Event/stopPropagation) stops the event handlers attached to the tags above from firing. | ||
| * [`e.preventDefault()` ](https://developer.mozilla.org/docs/Web/API/Event/preventDefault) prevents the default browser behavior for the few events that have it. | ||
| * [`e.stopPropagation()`](https://developer.mozilla.org/docs/Web/API/Event/stopPropagation) 停止触发附加到标签之外的事件处理函数。 |
|
|
||
| Absolutely! Event handlers are the best place for side effects. | ||
| 当然可以！事件处理函数是产生副作用的最佳位置。 |
|
|
||
| Unlike rendering functions, event handlers don't need to be [pure](/learn/keeping-components-pure), so it's a great place to *change* something—for example, change an input's value in response to typing, or change a list in response to a button press. However, in order to change some information, you first need some way to store it. In React, this is done by using [state, a component's memory](/learn/state-a-components-memory). You will learn all about it on the next page. | ||
| 与渲染函数不同，事件处理函数不需要是 [纯函数](/learn/keeping-components-pure)，因此它是 *更改* 某些内容的绝佳之选。例如，更改输入框的值以响应键入，或者更改列表以响应按钮的触发。但是，为了更改某些信息，你首先需要某种方式存储它。在 React 中，这是通过 [state（�组件的缓存）](/learn/state-a-components-memory) 来完成的。你将在下一章节了解所有相关信息。 |
There was a problem hiding this comment.
“因此它是 更改 某些内容的绝佳之选” place 没有翻译出来，建议改为“因此它是 更改 内容的绝佳位置”
| * 事件处理函数在组件内部定义，所以它们可以访问 props。 | ||
| * 你可以在父组件中定义一个事件处理函数，并将其作为 prop 传递给子组件。 | ||
| * 你可以根据特定于应用程序的名称定义事件处理函数的 prop。 | ||
| * 事件向上传播。通过事件的第一个参数调用 `e.stopPropagation()` 来防止这种情况。 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.