From c8b137a86d30991385d5cf4cbb93c8fa06e4048b Mon Sep 17 00:00:00 2001
From: Jiacheng Dong <43509711+Jiacheng787@users.noreply.github.com>
Date: Wed, 3 Nov 2021 22:25:50 +0800
Subject: [PATCH 01/13] doc(cn): responding-to-events

---
 beta/src/pages/learn/responding-to-events.md | 302 ++++++++++---------
 1 file changed, 152 insertions(+), 150 deletions(-)

diff --git a/beta/src/pages/learn/responding-to-events.md b/beta/src/pages/learn/responding-to-events.md
index 0c75cf2599..6389ce993c 100644
--- a/beta/src/pages/learn/responding-to-events.md
+++ b/beta/src/pages/learn/responding-to-events.md
@@ -1,24 +1,26 @@
 ---
-title: Responding to Events
+title: 响应事件
+translators:
+ - Jiacheng787
 ---
 
 <Intro>
 
-React lets you add event handlers to your JSX. Event handlers are your own functions that will be triggered in response to user interactions like clicking, hovering, focusing on form inputs, and so on.
+React 允许你在 JSX 中添加事件处理函数。事件处理函数是你自定义的函数，它将在响应用户交互（如点击、悬停、表单输入框获得焦点等）时触发。
 
 </Intro>
 
 <YouWillLearn>
 
-* Different ways to write an event handler
-* How to pass event handling logic from a parent component
-* How events propagate and how to stop them
+* 编写事件处理函数的不同方法
+* 如何从父组件传递事件处理逻辑
+* 事件如何传播以及如何停止它们
 
 </YouWillLearn>
 
-## Adding event handlers
+## 添加事件处理函数 {#adding-event-handlers}
 
-To add an event handler, you will first define a function and then [pass it as a prop](/learn/passing-props-to-a-component) to the appropriate JSX tag. For example, here is a button that doesn't do anything yet:
+要添加一个事件处理函数，你需要先定义一个函数，然后 [将它作为 prop 传入](/learn/passing-props-to-a-component) 合适的 JSX 标签。例如，这是一个尚未执行任何操作的按钮：
 
 <Sandpack>
 
@@ -26,7 +28,7 @@ To add an event handler, you will first define a function and then [pass it as a
 export default function Button() {
   return (
     <button>
-      I don't do anything
+      我什么都不做
     </button>
   );
 }
@@ -34,23 +36,23 @@ export default function Button() {
 
 </Sandpack>
 
-You can make it show a message when a user clicks by following these three steps:
+你可以通过以下三个步骤使它在用户点击时显示消息：
 
-1. Declare a function called `handleClick` *inside* your `Button` component.
-2. Implement the logic inside that function (use `alert` to show the message).
-3. Add `onClick={handleClick}` to the `<button>` JSX.
+1. 在 `Button` 组件 *内部* 声明一个名为 `handleClick` 的函数。
+2. 实现函数内部的逻辑（使用 `alert` 来显示消息）。
+3. 添加 `onClick={handleClick}` 到 `<button>` JSX 。
 
 <Sandpack>
 
 ```js
 export default function Button() {
   function handleClick() {
-    alert('You clicked me!');
+    alert('你点击了我！');
   }
 
   return (
     <button onClick={handleClick}>
-      Click me
+      点我
     </button>
   );
 }
@@ -62,77 +64,77 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-You defined the `handleClick` function and then [passed it as a prop](/learn/passing-props-to-a-component) to `<button>`.  `handleClick` is an **event handler**. Event handler functions:
+你定义了 `handleClick` 函数然后 [将它作为 prop 传入](/learn/passing-props-to-a-component) `<button>` 。`handleClick` 是一个 **事件处理函数** 。事件处理函数:
 
-* Are usually defined *inside* your components.
-* Have names that start with `handle`, followed by the name of the event.
+* 通常在你的组件 *内部* 定义。
+* 名称以 `handle` 开头，后跟事件名称。
 
-> 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}` 等等。
 
-Alternatively, you can define an event handler inline in the JSX:
+此外，你可以在 JSX 中定义一个内联的事件处理函数：
 
 ```jsx
 <button onClick={function handleClick() {
-  alert('You clicked me!');
+  alert('你点击了我！');
 }}>
 ```
 
-Or, more concisely, using an arrow function:
+或者，更简洁地，使用箭头函数：
 
 ```jsx
 <button onClick={() => {
-  alert('You clicked me!');
+  alert('你点击了我！');
 }}>
 ```
 
-All of these styles are equivalent. Inline event handlers are convenient for short functions.
+以上所有方式都是等效的。内联事件处理函数对于短函数很方便。
 
 <Gotcha>
 
-Functions passed to event handlers must be passed, not called. For example:
+传递给事件处理函数的函数必须被传递，而不是被调用。例如：
 
-| passing a function (correct)           | calling a function (incorrect) |
+| 传递一个函数（正确）           | 调用一个函数（错误） |
 |----------------------------------------|--------------------------------|
 | `<button onClick={handleClick}>` | `<button onClick={handleClick()}>` |
 
-The difference is subtle. In the first example, the `handleClick` function is passed as an `onClick` event handler. This tells React to remember it and only call your function when the user clicks the button.
+区别很微妙。在第一个例子中，`handleClick` 函数作为 `onClick` 事件处理函数传递。这让 React 记住它并且只在用户点击按钮时调用你的函数。
 
-In the second example, the `()` at the end of `handleClick()` fires the function *immediately* during [rendering](/learn/render-and-commit), without any clicks. This is because JavaScript inside the [JSX `{` and `}`](/learn/javascript-in-jsx-with-curly-braces) executes right away.
+在第二个例子中，`handleClick()` 最后的 `()` 在 [渲染](/learn/render-and-commit) 过程中 *立即* 触发函数，即使没有任何点击。这是因为在 [JSX `{` 和 `}`](/learn/javascript-in-jsx-with-curly-braces) 内部的 JavaScript 会立即执行。
 
-When you write code inline, the same pitfall presents itself in a different way:
+当你编写内联代码时，同样的陷阱以不同的方式呈现：
 
-| passing a function (correct)           | calling a function (incorrect) |
+| 传递一个函数（正确）           | 调用一个函数（错误） |
 |----------------------------------------|--------------------------------|
 | `<button onClick={() => alert('...')}>` | `<button onClick={alert('...')}>` |
 
 
-Passing inline code like this won't fire on click—it fires every time the component renders:
+像这样传递内联代码不会在点击时触发———每次组件渲染时都会触发：
 
 ```jsx
-// This alert fires when the component renders, not when clicked!
-<button onClick={alert('You clicked me!')}>
+// 这个 alert 在组件渲染时触发，而不是点击时触发！
+<button onClick={alert('你点击了我！')}>
 ```
 
-If you want to define your event handler inline, wrap it in an anonymous function like so:
+如果你想要定义内联事件处理函数，请将其包装在匿名函数中，如下所示：
 
 ```jsx
-<button onClick={() => alert('You clicked me!')}>
+<button onClick={() => alert('你点击了我！')}>
 ```
 
-Rather than executing the code inside with every render, this creates a function to be called later.
+这里创建了一个稍后调用的函数，而不是在每次渲染时执行内部代码。
 
-In both cases, what you want to pass is a function:
+在这两种情况下，你要传递的是一个函数：
 
-* `<button onClick={handleClick}>` passes the `handleClick` function.
-* `<button onClick={() => alert('...')}>` passes the `() => alert('...')` function.
+* `<button onClick={handleClick}>` 传递了 `handleClick` 函数。
+* `<button onClick={() => alert('...')}>` 传递了 `() => alert('...')` 函数。
 
-> Check out the [JavaScript Refresher](a-javascript-refresher#arrow-functions) for more on arrow functions.
+> 查看 [JavaScript Refresher](a-javascript-refresher#arrow-functions) 了解更多箭头函数的信息。
 
 </Gotcha>
 
-### Reading props in event handlers
+### 在事件处理函数中读取 props {#reading-props-in-event-handlers}
 
-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 ：
 
 <Sandpack>
 
@@ -148,11 +150,11 @@ function AlertButton({ message, children }) {
 export default function Toolbar() {
   return (
     <div>
-      <AlertButton message="Playing!">
-        Play Movie
+      <AlertButton message="正在播放！">
+        播放电影
       </AlertButton>
-      <AlertButton message="Uploading!">
-        Upload Image
+      <AlertButton message="正在上传！">
+        上传图片
       </AlertButton>
     </div>
   );
@@ -165,13 +167,13 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-This lets these two buttons show different messages. Try changing the messages passed to them.
+这让两个按钮展示不同的消息。尝试更改传递给他们的消息。
 
-### Passing event handlers as props
+### 将事件处理函数作为 props 传递 {#passing-event-handlers-as-props}
 
-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` 组件的位置，你可能想要执行不同的功能——也许一个播放电影，另一个上传图片。
 
-To do this, pass a prop the component receives from its parent as the event handler like so:
+为此，将组件从其父组件接收的 prop 作为事件处理函数传递，如下所示：
 
 <Sandpack>
 
@@ -186,20 +188,20 @@ function Button({ onClick, children }) {
 
 function PlayButton({ movieName }) {
   function handlePlayClick() {
-    alert(`Playing ${movieName}!`);
+    alert(`正在播放 ${movieName}！`);
   }
 
   return (
     <Button onClick={handlePlayClick}>
-      Play "{movieName}"
+      播放 "{movieName}"
     </Button>
   );
 }
 
 function UploadButton() {
   return (
-    <Button onClick={() => alert('Uploading!')}>
-      Upload Image
+    <Button onClick={() => alert('正在上传！')}>
+      上传图片
     </Button>
   );
 }
@@ -207,7 +209,7 @@ function UploadButton() {
 export default function Toolbar() {
   return (
     <div>
-      <PlayButton movieName="Kiki's Delivery Service" />
+      <PlayButton movieName="魔女宅急便" />
       <UploadButton />
     </div>
   );
@@ -220,22 +222,22 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-Here, the `Toolbar` component renders a `PlayButton` and an `UploadButton`:
+在这里，`Toolbar` 组件渲染了一个 `PlayButton` 组件和 `UploadButton` 组件：
 
-- `PlayButton` passes `handlePlayClick` as the `onClick` prop to the `Button` inside.
-- `UploadButton` passes `() => alert('Uploading!')` as the `onClick` prop to the `Button` inside.
+- `PlayButton` 将 `handlePlayClick` 作为 `onClick` prop 传入 `Button` 组件内部。
+- `UploadButton` 将 `() => alert('正在上传！')` 作为 `onClick` prop 传入 `Button` 组件内部。
 
-Finally, your `Button` component accepts a prop called `onClick`. It passes that prop directly to the built-in browser `<button>` with `onClick={onClick}`. This tells React to call the passed function on click.
+最后，你的 `Button` 组件接收一个名为 `onClick` 的 prop 。它直接将这个 prop 以 `onClick={onClick}` 方式传递给浏览器内置的 `<button>` 。这告诉 React 在点击时调用传入的函数。
 
-If you use a [design system](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969), it's common for components like buttons to contain styling but not specify behavior. Instead, components like `PlayButton` and `UploadButton` will pass event handlers down.
+如果你使用一个 [设计系统](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969)，按钮等组件通常包含样式但不指定行为。相反，类似 `PlayButton` 和 `UploadButton` 的组件会向下传递事件处理函数。
 
-### Naming event handler props
+### 命名事件处理函数 prop {#naming-event-handler-props}
 
-Built-in components like `<button>` and `<div>` only support [browser event names](/reference/reactdom-api) like `onClick`. However, when you're building your own components, you can name their event handler props any way that you like.
+内置组件例如 `<button>` 和 `<div>` 仅支持 [浏览器事件名称](/reference/reactdom-api) ，例如 `onClick` 。但是，当你构建自己的组件时，你可以按你喜欢的任何方式命名它们的事件处理函数 props 。
 
-> By convention, event handler props should start with `on`, followed by a capital letter.
+> 按照惯例，事件处理函数 props 应该以 `on` 开头，后跟一个大写字母。
 
-For example, the `Button` component's `onClick` prop could have been called `onSmash`:
+例如，这个 `Button` 组件的 `onClick` prop 可以被命名为 `onSmash` ：
 
 <Sandpack>
 
@@ -251,11 +253,11 @@ function Button({ onSmash, children }) {
 export default function App() {
   return (
     <div>
-      <Button onSmash={() => alert('Playing!')}>
-        Play Movie
+      <Button onSmash={() => alert('正在播放！')}>
+        播放电影
       </Button>
-      <Button onSmash={() => alert('Uploading!')}>
-        Upload Image
+      <Button onSmash={() => alert('正在上传！')}>
+        上传图片
       </Button>
     </div>
   );
@@ -268,9 +270,9 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-In this example, `<button onClick={onSmash}>` shows that the browser `<button>` (lowercase) still needs a prop called `onClick`, but the prop name received by your custom `Button` component is up to you!
+在这里例子中，`<button onClick={onSmash}>` 表明浏览器内置的 `<button>`（小写）仍然需要一个 `onClick` prop ，但是你自定义的 `Button` 组件接收到的 prop 名称由你决定！
 
-When your component supports multiple interactions, you might name event handler props for app-specific concepts. For example, this `Toolbar` component receives `onPlayMovie` and `onUploadImage` event handlers:
+当你的组件支持多种交互时，你可以用应用程序特定的概念命名事件处理函数 prop 。例如，一个 `Toolbar` 组件接收 `onPlayMovie` 和 `onUploadImage` 两个事件处理函数：
 
 <Sandpack>
 
@@ -278,8 +280,8 @@ When your component supports multiple interactions, you might name event handler
 export default function App() {
   return (
     <Toolbar
-      onPlayMovie={() => alert('Playing!')}
-      onUploadImage={() => alert('Uploading!')}
+      onPlayMovie={() => alert('正在播放！')}
+      onUploadImage={() => alert('正在上传！')}
     />
   );
 }
@@ -288,10 +290,10 @@ function Toolbar({ onPlayMovie, onUploadImage }) {
   return (
     <div>
       <Button onClick={onPlayMovie}>
-        Play Movie
+        播放电影
       </Button>
       <Button onClick={onUploadImage}>
-        Upload Image
+        上传图片
       </Button>
     </div>
   );
@@ -312,17 +314,17 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-Notice how the `App` component does not need to know *what* `Toolbar` will do with `onPlayMovie` or `onUploadImage`. That's an implementation detail of the `Toobar`. Here, `Toolbar` passes them down as `onClick` handlers to its `Button`s, but it could later also trigger them on a keyboard shortcut. Naming props after app-specific interactions like `onPlayMovie` gives you the flexibility to change how they're used later.
+请注意 `App` 组件不需要知道 `Toolbar` 将会对 `onPlayMovie` 和 `onUploadImage` 做 *什么* 。上面是一个 `Toobar` 的实现细节。在这里，`Toolbar` 将它们作为 `onClick` 处理函数向下传递给它的 `Button` ，但也可以稍后通过快捷键触发它们。用应用程序特定的交互方式（如 `onPlayMovie`）来命名 prop ，可以让你灵活地更改以后使用它们的方式。
 
-## Event propagation
+## 事件传播 {#event-propagation}
 
 <!--
 // TODO illo
 -->
 
-Event handlers will also catch events from any children your component might have. We say that an event "bubbles" or "propagates" up the tree: it starts with where the event happened, and then goes up the tree.
+事件处理函数还将捕获来自组件可能拥有的任何子组件的事件。我们说一个事件“冒泡”或“传播”到树的上方：它从事件发生的地方开始，然后沿着树向上传播。
 
-This `<div>` contains two buttons. Both the `<div>` *and* each button have their own `onClick` handlers. Which handlers do you think will fire when you click a button?
+下面这个 `<div>` 包含两个按钮。`<div>` *和* 每个按钮都有自己的 `onClick` 处理函数。你认为点击按钮时会触发哪些处理函数？
 
 <Sandpack>
 
@@ -330,13 +332,13 @@ This `<div>` contains two buttons. Both the `<div>` *and* each button have their
 export default function Toolbar() {
   return (
     <div className="Toolbar" onClick={() => {
-      alert('You clicked on the toolbar!');
+      alert('你点击了 toolbar ！');
     }}>
-      <button onClick={() => alert('Playing!')}>
-        Play Movie
+      <button onClick={() => alert('正在播放！')}>
+        播放电影
       </button>
-      <button onClick={() => alert('Uploading!')}>
-        Upload Image
+      <button onClick={() => alert('正在上传！')}>
+        上传图片
       </button>
     </div>
   );
@@ -353,19 +355,19 @@ button { margin: 5px; }
 
 </Sandpack>
 
-If you click on either button, its `onClick` will run first, followed by the parent `<div>`'s `onClick`. So two messages will appear. If you click the toolbar itself, only the parent `<div>`'s `onClick` will run.
+如果你点击任一按钮，它自身的 `onClick` 将首先执行，然后是父级 `<div>` 的 `onClick` 。所以会出现两条消息。如果你点击 toolbar 本身，只有父级 `<div>` 的 `onClick` 会执行。
 
 <Gotcha>
 
-All events propagate in React except `onScroll`, which only works on the JSX tag you attach it to.
+在 React 中所有事件都会传播，除了 `onScroll` ，它仅适用于你附加到的 JSX 标签。
 
 </Gotcha>
 
-### Stopping propagation
+### 停止传播 {#stopping-propagation}
 
-Event handlers receive an **event object** as their only argument. By convention, it's usually called `e`, which stands for "event." You can use this object to read information about the event.
+事件处理函数接收一个 **事件对象** 作为它们唯一的参数。按照惯例，它通常被称为 `e` ，代表 "event"（事件）。你可以使用此对象来读取有关事件的信息。
 
-That event object also lets you stop the propagation. If you want to prevent an event from reaching parent components, you need to call `e.stopPropagation()` like this `Button` component does:
+这个事件对象还允许你停止传播。如果你想阻止一个事件到达父组件，你需要像下面 `Button` 组件那样调用 `e.stopPropagation()` ：
 
 <Sandpack>
 
@@ -384,13 +386,13 @@ function Button({ onClick, children }) {
 export default function Toolbar() {
   return (
     <div className="Toolbar" onClick={() => {
-      alert('You clicked on the toolbar!');
+      alert('你点击了 toolbar ！');
     }}>
-      <Button onClick={() => alert('Playing!')}>
-        Play Movie
+      <Button onClick={() => alert('正在播放！')}>
+        播放电影
       </Button>
-      <Button onClick={() => alert('Uploading!')}>
-        Upload Image
+      <Button onClick={() => alert('正在上传！')}>
+        上传图片
       </Button>
     </div>
   );
@@ -407,45 +409,45 @@ button { margin: 5px; }
 
 </Sandpack>
 
-When you click on a button:
+当你点击按钮时：
 
-1. React calls the `onClick` handler passed to `<button>`. 
-2. That handler, defined in `Button`, does the following:
-   * Calls `e.stopPropagation()`, preventing the event from bubbling further.
-   * Calls the `onClick` function, which is a prop passed from the `Toolbar` component.
-3. That function, defined in the `Toolbar` component, displays the button's own alert.
-4. Since the propagation was stopped, the parent `<div>`'s `onClick` handler does *not* run.
+1. React 调用了传递给 `<button>` 的 `onClick` 处理函数。
+2. 定义在 `Button` 中的处理函数执行了如下操作：
+   * 调用 `e.stopPropagation()` ，防止事件进一步冒泡。
+   * 调用 `onClick` 函数，它是从 `Toolbar` 组件传递过来的 prop 。
+3. 在 `Toolbar` 组件中定义的函数，显示按钮对应的 alert 。
+4. 由于传播被停止，父级 `<div>` 的 `onClick` 处理函数不会执行。
 
-As a result of `e.stopPropagation()`, clicking on the buttons now only shows a single alert (from the `<button>`) rather than the two of them (from the `<button>` and the parent toolbar `<div>`). Clicking a button is not the same thing as clicking the surrounding toolbar, so stopping the propagation makes sense for this UI.
+由于 `e.stopPropagation()` ，点击按钮现在仅显示一个 alert（来自 `<button>`）而不是其中的两个（来自 `<button>` 和父级 toolbar `<div>`）。点击按钮与点击周围的 toolbar 不同，因此停止传播对这个 UI 是有意义的。
 
-<DeepDive title="Capture phase events">
+<DeepDive title="捕获阶段的事件">
 
 <!--
 // TODO Illo
 -->
 
-In rare cases, you might need to catch all events on child elements, *even if they stopped propagation*. For example, maybe you want to log every click to analytics, regardless of the propagation logic. You can do this by adding `Capture` at the end of the event name:
+极少数情况下，你可能需要捕获子元素上的所有事件，*即使它们停止了传播* 。例如，你可能希望将每次点击记录到分析中，而不管传播逻辑是什么。你可以通过在事件名称末尾添加 `Capture` 来实现：
 
 ```js
-<div onClickCapture={() => { /* this runs first */ }}>
+<div onClickCapture={() => { /* 这会首先执行 */ }}>
   <button onClick={e => e.stopPropagation()} />
   <button onClick={e => e.stopPropagation()} />
 </div>
 ```
 
-Each event propagates in three phases: 
+每个事件分三个阶段传播：
 
-1. It travels down, calling all `onClickCapture` handlers.
-2. It runs the clicked element's `onClick` handler. 
-3. It travels upwards, calling all `onClick` handlers.
+1. 它向下传播，调用所有的 `onClickCapture` 处理函数。
+2. 它执行被点击元素的 `onClick` 处理函数。 
+3. 它向上传播，调用所有的 `onClick` 处理函数。
 
-Capture events are useful for code like routers or analytics, but you probably won't use them in app code.
+捕获事件对于路由器或分析等代码很有用，但你可能不会在应用程序代码中使用它们。
 
 </DeepDive>
 
-### Passing handlers as alternative to propagation
+### 传递处理函数作为传播的替代方案 {#passing-handlers-as-alternative-to-propagation}
 
-Notice how this click handler runs a line of code _and then_ calls the `onClick` prop passed by the parent:
+注意这个点击事件处理函数如何执行一行代码 _然后_ 调用父组件传递的 `onClick` prop ：
 
 ```js {4,5}
 function Button({ onClick, children }) {
@@ -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` 函数之前向这个处理函数添加更多代码。此模式为传播提供了一个 *替代方案* 。它让子组件处理事件，同时也让父组件指定一些额外的行为。与传播不同，它不是自动的。但是这种模式的好处是，你可以清楚地跟踪作为某个事件执行的整个调用链。
 
-If you rely on propagation and it's difficult to trace which handlers execute and why, try this approach instead.
+如果你依赖于传播，而且很难追踪哪些处理程序在执行，以及执行的原因，可以试试这种方法。
 
-### Preventing default behavior
+### 阻止默认行为 {#preventing-default-behavior}
 
-Some browser events have default behavior associated with them. For example, a `<form>` submit event, which happens when a button inside of it is clicked, will reload the whole page by default:
+某些浏览器事件具有与其关联的默认行为。例如，点击 `<form>` 表单内部的按钮会触发表单提交事件，默认情况下将重新加载整个页面：
 
 <Sandpack>
 
 ```js
 export default function Signup() {
   return (
-    <form onSubmit={() => alert('Submitting!')}>
+    <form onSubmit={() => alert('提交表单！')}>
       <input />
-      <button>Send</button>
+      <button>发送</button>
     </form>
   );
 }
@@ -487,7 +489,7 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-You can call `e.preventDefault()` on the event object to stop this from happening:
+你可以调用事件对象上的 `e.preventDefault()` 来阻止这种情况发生：
 
 <Sandpack>
 
@@ -496,10 +498,10 @@ export default function Signup() {
   return (
     <form onSubmit={e => {
       e.preventDefault();
-      alert('Submitting!');
+      alert('提交表单！');
     }}>
       <input />
-      <button>Send</button>
+      <button>发送</button>
     </form>
   );
 }
@@ -511,28 +513,28 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-Don't confuse `e.stopPropagation()` and `e.preventDefault()`. They are both useful, but are unrelated:
+不要混淆 `e.stopPropagation()` 和 `e.preventDefault()` 。它们都很有用，但是不相关：
 
-* [`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) 停止触发附加到标签之外的事件处理函数。
+* [`e.preventDefault()` ](https://developer.mozilla.org/docs/Web/API/Event/preventDefault) 阻止少数事件的默认浏览器行为。
 
-## Can event handlers have side effects?
+## 事件处理函数可以包含副作用吗？ {#can-event-handlers-have-side-effects}
 
-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, a component's memory](/learn/state-a-components-memory) 来完成的。你将在下一页了解所有相关信息。
 
 <Recap>
 
-* You can handle events by passing a function as a prop to an element like `<button>`.
-* Event handlers must be passed, **not called!** `onClick={handleClick}`, not `onClick={handleClick()}`.
-* You can define an event handler function separately or inline.
-* Event handlers are defined inside a component, so they can access props.
-* You can declare an event handler in a parent and pass it as a prop to a child.
-* You can define your own event handler props with application-specific names.
-* Events propagate upwards. Call `e.stopPropagation()` on the first argument to prevent that.
-* Events may have unwanted default browser behavior. Call `e.preventDefault()` to prevent that.
-* Explicitly calling an event handler prop from a child handler is a good alternative to propagation.
+* 你可以通过将函数作为 prop 传递给元素如 `<button>` 来处理事件。
+* 必须传递事件处理函数，**而不是调用！** `onClick={handleClick}` ，不是 `onClick={handleClick()}` 。
+* 你可以单独或者内联定义事件处理函数。
+* 事件处理函数在组件内部定义，所以它们可以访问 props 。
+* 你可以在父组件中定义一个事件处理函数，并将其作为 prop 传递给子元素。
+* 你可以使用应用程序特定的名称定义自己的事件处理函数 prop 。
+* 事件向上传播。在第一个参数上调用 `e.stopPropagation()` 来防止这种情况。
+* 事件可能具有不需要的浏览器默认行为。调用 `e.preventDefault()` 来阻止这种情况。
+* 从子组件显式调用事件处理函数 prop 是传播的一个很好的替代方案。
 
 </Recap>
 
@@ -540,9 +542,9 @@ Unlike rendering functions, event handlers don't need to be [pure](/learn/keepin
 
 <Challenges>
 
-### Fix an event handler
+### 修复一个事件处理函数 {#fix-an-event-handler}
 
-Clicking this button is supposed to switch the page background between white and black. However, nothing happens when you click it. Fix the problem. (Don't worry about the logic inside `handleClick`—that part is fine.)
+点击这个按钮应该可以在白色和黑色之间切换页面背景。然而，当你点击它时，什么也没有发生。解决这个问题。（不用担心 `handleClick` 里面的逻辑——那部分很好。）
 
 <Sandpack>
 
@@ -559,7 +561,7 @@ export default function LightSwitch() {
 
   return (
     <button onClick={handleClick()}>
-      Toggle the lights
+      切换背景
     </button>
   );
 }
@@ -569,7 +571,7 @@ export default function LightSwitch() {
 
 <Solution>
 
-The problem is that `<button onClick={handleClick()}>` _calls_ the `handleClick` function while rendering instead of _passing_ it. Removing the `()` call so that it's `<button onClick={handleClick}>` fixes the issue:
+这是由于 `<button onClick={handleClick()}>` 在渲染过程中 _调用_ 了 `handleClick` 函数而不是 _传递_ 它。移除 `()` 调用改为 `<button onClick={handleClick}>` 进而修复问题：
 
 <Sandpack>
 
@@ -586,7 +588,7 @@ export default function LightSwitch() {
 
   return (
     <button onClick={handleClick}>
-      Toggle the lights
+      切换背景
     </button>
   );
 }
@@ -594,7 +596,7 @@ export default function LightSwitch() {
 
 </Sandpack>
 
-Alternatively, you could wrap the call into another function, like `<button onClick={() => handleClick()}`:
+或者，你可以把函数调用包裹在另一个函数内，例如 `<button onClick={() => handleClick()}` ：
 
 <Sandpack>
 
@@ -611,7 +613,7 @@ export default function LightSwitch() {
 
   return (
     <button onClick={() => handleClick()}>
-      Toggle the lights
+      切换背景
     </button>
   );
 }
@@ -621,11 +623,11 @@ export default function LightSwitch() {
 
 </Solution>
 
-### Wire up the events
+### 连接事件 {#wire-up-the-events}
 
-This `ColorSwitch` component renders a button. It's supposed to change the page color. Wire it up to the `onChangeColor` event handler prop it receives from the parent so that clicking the button changes the color.
+这个 `ColorSwitch` 组件渲染一个按钮。它应该改变页面颜色。将它与从父组件接收的 `onChangeColor` 事件处理函数 prop 连接，以便在点击按钮时改变颜色。
 
-After you do this, notice that clicking the button also increments the page click counter. Your colleague who wrote the parent component insists that `onChangeColor` does not increment any counters. What else might be happening? Fix it so that clicking the button *only* changes the color, and does _not_ increment the counter.
+在你这样做了之后，你会发现点击按钮也会增加页面点击计数器的值。编写父组件的同事坚持 `onChangeColor` 不会增加计数器的值。还发生了什么呢？修复它，使点击按钮 *只* 改变颜色，并且 _不_ 增加计数器。
 
 <Sandpack>
 
@@ -635,7 +637,7 @@ export default function ColorSwitch({
 }) {
   return (
     <button>
-      Change color
+      改变颜色
     </button>
   );
 }
@@ -669,7 +671,7 @@ export default function App() {
       <ColorSwitch onChangeColor={handleChangeColor} />
       <br />
       <br />
-      <h2>Clicks on the page: {clicks}</h2>
+      <h2>页面点击次数：{clicks}</h2>
     </div>
   );
 }
@@ -679,9 +681,9 @@ export default function App() {
 
 <Solution>
 
-First, you need to add the event handler, like `<button onClick={onChangeColor}>`.
+首先，你需要添加事件处理函数，例如 `<button onClick={onChangeColor}>` 。
 
-However, this introduces the problem of the incrementing counter. If `onChangeColor` does not do this, as your colleague insists, then the problem is that this event propagates up, and some handler above does it. To solve this problem, you need to stop the propagation. But don't forget that you should still call `onChangeColor`.
+但是，这里引入了增加计数器的问题。如果正如你的同事所坚持的那样，`onChangeColor` 不这样做，那么问题在于这个事件向上传播，并且上面的某些事件处理函数会这样做。为了解决这个问题，你需要停止传播。但是不要忘记你仍然应该调用 `onChangeColor` 。
 
 <Sandpack>
 
@@ -694,7 +696,7 @@ export default function ColorSwitch({
       e.stopPropagation();
       onChangeColor();
     }}>
-      Change color
+      改变颜色
     </button>
   );
 }
@@ -728,7 +730,7 @@ export default function App() {
       <ColorSwitch onChangeColor={handleChangeColor} />
       <br />
       <br />
-      <h2>Clicks on the page: {clicks}</h2>
+      <h2>页面点击次数：{clicks}</h2>
     </div>
   );
 }

From 1bbafb451e87236ee02156fe2accf81afeb1b5ba Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Wed, 3 Nov 2021 22:56:37 +0800
Subject: [PATCH 02/13] Update beta/src/pages/learn/responding-to-events.md

---
 beta/src/pages/learn/responding-to-events.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/responding-to-events.md b/beta/src/pages/learn/responding-to-events.md
index 6389ce993c..9678f85b1c 100644
--- a/beta/src/pages/learn/responding-to-events.md
+++ b/beta/src/pages/learn/responding-to-events.md
@@ -1,7 +1,7 @@
 ---
 title: 响应事件
 translators:
- - Jiacheng787
+  - Jiacheng787
 ---
 
 <Intro>

From 7032da79313277e3d0f5a347b152a3373cf2af97 Mon Sep 17 00:00:00 2001
From: Jiacheng Dong <43509711+Jiacheng787@users.noreply.github.com>
Date: Wed, 3 Nov 2021 23:18:27 +0800
Subject: [PATCH 03/13] Apply suggestions from code review

Co-authored-by: QiChang Li <github@liqichang.com>
---
 beta/src/pages/learn/responding-to-events.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/beta/src/pages/learn/responding-to-events.md b/beta/src/pages/learn/responding-to-events.md
index 9678f85b1c..1441e9e581 100644
--- a/beta/src/pages/learn/responding-to-events.md
+++ b/beta/src/pages/learn/responding-to-events.md
@@ -20,7 +20,7 @@ React 允许你在 JSX 中添加事件处理函数。事件处理函数是你自
 
 ## 添加事件处理函数 {#adding-event-handlers}
 
-要添加一个事件处理函数，你需要先定义一个函数，然后 [将它作为 prop 传入](/learn/passing-props-to-a-component) 合适的 JSX 标签。例如，这是一个尚未执行任何操作的按钮：
+如需添加一个事件处理函数，你需要先定义一个函数，然后 [将其作为 prop 传入](/learn/passing-props-to-a-component) 合适的 JSX 标签。例如，这里有一个没绑定任何事件的按钮：
 
 <Sandpack>
 
@@ -28,7 +28,7 @@ React 允许你在 JSX 中添加事件处理函数。事件处理函数是你自
 export default function Button() {
   return (
     <button>
-      我什么都不做
+      未绑定任何事件
     </button>
   );
 }
@@ -36,11 +36,11 @@ export default function Button() {
 
 </Sandpack>
 
-你可以通过以下三个步骤使它在用户点击时显示消息：
+按照如下三个步骤，即可让它在用户点击时显示消息：
 
 1. 在 `Button` 组件 *内部* 声明一个名为 `handleClick` 的函数。
 2. 实现函数内部的逻辑（使用 `alert` 来显示消息）。
-3. 添加 `onClick={handleClick}` 到 `<button>` JSX 。
+3. 添加 `onClick={handleClick}` 到 `<button>` JSX 中。
 
 <Sandpack>
 

From 02f0180e4509c114d0250a844165fbc737937475 Mon Sep 17 00:00:00 2001
From: Jiacheng Dong <43509711+Jiacheng787@users.noreply.github.com>
Date: Thu, 4 Nov 2021 22:04:41 +0800
Subject: [PATCH 04/13] Update beta/src/pages/learn/responding-to-events.md

Co-authored-by: QiChang Li <github@liqichang.com>
---
 beta/src/pages/learn/responding-to-events.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/responding-to-events.md b/beta/src/pages/learn/responding-to-events.md
index 1441e9e581..dc20463cbd 100644
--- a/beta/src/pages/learn/responding-to-events.md
+++ b/beta/src/pages/learn/responding-to-events.md
@@ -6,7 +6,7 @@ translators:
 
 <Intro>
 
-React 允许你在 JSX 中添加事件处理函数。事件处理函数是你自定义的函数，它将在响应用户交互（如点击、悬停、表单输入框获得焦点等）时触发。
+使用 React 可以在 JSX 中添加事件处理函数。其中事件处理函数为自定义函数，它将在响应用户交互（如点击、悬停、表单输入框获得焦点等）时触发。
 
 </Intro>
 

From bfa07dc1142be426acf1e5aec160597117aafe65 Mon Sep 17 00:00:00 2001
From: Jiacheng Dong <43509711+Jiacheng787@users.noreply.github.com>
Date: Fri, 12 Nov 2021 09:54:50 +0800
Subject: [PATCH 05/13] Update beta/src/pages/learn/responding-to-events.md

Co-authored-by: QiChang Li <github@liqichang.com>
---
 beta/src/pages/learn/responding-to-events.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/responding-to-events.md b/beta/src/pages/learn/responding-to-events.md
index 841516b1dc..954aafe52e 100644
--- a/beta/src/pages/learn/responding-to-events.md
+++ b/beta/src/pages/learn/responding-to-events.md
@@ -65,7 +65,7 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-你定义了 `handleClick` 函数然后 [将它作为 prop 传入](/learn/passing-props-to-a-component) `<button>` 。`handleClick` 是一个 **事件处理函数** 。事件处理函数:
+你可以定义 `handleClick` 函数然后 [将其作为 prop 传入](/learn/passing-props-to-a-component) `<button>`。其中 `handleClick` 是一个 **事件处理函数** 。事件处理函数有如下特点:
 
 * 通常在你的组件 *内部* 定义。
 * 名称以 `handle` 开头，后跟事件名称。

From 7a7587d20dccfe2d144562691bf7ec0507f9dcb7 Mon Sep 17 00:00:00 2001
From: Jiacheng Dong <43509711+Jiacheng787@users.noreply.github.com>
Date: Sun, 14 Nov 2021 13:52:02 +0800
Subject: [PATCH 06/13] Apply suggestions from code review

Co-authored-by: QiChang Li <github@liqichang.com>
---
 beta/src/pages/learn/responding-to-events.md | 22 ++++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/beta/src/pages/learn/responding-to-events.md b/beta/src/pages/learn/responding-to-events.md
index d1b5f49a75..823ccd4efa 100644
--- a/beta/src/pages/learn/responding-to-events.md
+++ b/beta/src/pages/learn/responding-to-events.md
@@ -69,9 +69,9 @@ button { margin-right: 10px; }
 * 通常在你的组件 *内部* 定义。
 * 名称以 `handle` 开头，后跟事件名称。
 
-> 虽然事件处理函数没有专门的命名规则，但是按照惯例用 `handle` 后跟事件名称的形式来命名他们。你将会经常看到 `onClick={handleClick}` 、`onMouseEnter={handleMouseEnter}` 等等。
+> 虽然事件处理函数没有专门的命名规则，但大家习惯以 `handle` 为前缀，后接事件名来进行命名。你经常会看到类似 `onClick={handleClick}` 、`onMouseEnter={handleMouseEnter}` 的命名等等。
 
-此外，你可以在 JSX 中定义一个内联的事件处理函数：
+此外，你还可以在 JSX 中定义一个内联的事件处理函数：
 
 ```jsx
 <button onClick={function handleClick() {
@@ -79,7 +79,7 @@ button { margin-right: 10px; }
 }}>
 ```
 
-或者，更简洁地，使用箭头函数：
+或者，直接使用更为简洁箭头函数：
 
 ```jsx
 <button onClick={() => {
@@ -87,28 +87,28 @@ button { margin-right: 10px; }
 }}>
 ```
 
-以上所有方式都是等效的。内联事件处理函数对于短函数很方便。
+以上所有方式都是等效的。当函数体较短时，内联事件处理函数会很方便。
 
 <Gotcha>
 
-传递给事件处理函数的函数必须被传递，而不是被调用。例如：
+传递给事件处理函数的函数应直接传递，而非调用。例如：
 
 | 传递一个函数（正确）           | 调用一个函数（错误） |
 |----------------------------------------|--------------------------------|
 | `<button onClick={handleClick}>` | `<button onClick={handleClick()}>` |
 
-区别很微妙。在第一个例子中，`handleClick` 函数作为 `onClick` 事件处理函数传递。这让 React 记住它并且只在用户点击按钮时调用你的函数。
+区别很微妙。在第一个示例中，`handleClick` 函数作为 `onClick` 事件处理函数传递。这会让 React 记住它，并且只在用户点击按钮时调用你的函数。
 
-在第二个例子中，`handleClick()` 最后的 `()` 在 [渲染](/learn/render-and-commit) 过程中 *立即* 触发函数，即使没有任何点击。这是因为在 [JSX `{` 和 `}`](/learn/javascript-in-jsx-with-curly-braces) 内部的 JavaScript 会立即执行。
+在第二个示例中，`handleClick()` 中最后的 `()` 会在 [渲染](/learn/render-and-commit) 过程中 *立即* 触发函数，即使没有任何点击。这是因为在 [JSX `{` 和 `}`](/learn/javascript-in-jsx-with-curly-braces) 之间的 JavaScript 会立即执行。
 
-当你编写内联代码时，同样的陷阱以不同的方式呈现：
+当你编写内联代码时，同样的陷阱可能会以不同的方式出现：
 
 | 传递一个函数（正确）           | 调用一个函数（错误） |
 |----------------------------------------|--------------------------------|
 | `<button onClick={() => alert('...')}>` | `<button onClick={alert('...')}>` |
 
 
-像这样传递内联代码不会在点击时触发———每次组件渲染时都会触发：
+如果按如下方式传递内联代码，并不会在点击时触发，而是会在每次组件渲染时触发：
 
 ```jsx
 // 这个 alert 在组件渲染时触发，而不是点击时触发！
@@ -121,7 +121,7 @@ button { margin-right: 10px; }
 <button onClick={() => alert('你点击了我！')}>
 ```
 
-这里创建了一个稍后调用的函数，而不是在每次渲染时执行内部代码。
+这里创建了一个稍后调用的函数，而不会在每次渲染时执行其内部代码。
 
 在这两种情况下，你要传递的是一个函数：
 
@@ -167,7 +167,7 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-这让两个按钮展示不同的消息。尝试更改传递给他们的消息。
+此处有两个按钮，会展示不同的消息。你可以尝试更改传递给他们的消息。
 
 ### 将事件处理函数作为 props 传递 {#passing-event-handlers-as-props}
 

From fd39271997dba59d7f64a90bc8dfdfcdab90d8d7 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Mon, 15 Nov 2021 23:59:50 +0800
Subject: [PATCH 07/13] Update beta/src/pages/learn/responding-to-events.md

---
 beta/src/pages/learn/responding-to-events.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/responding-to-events.md b/beta/src/pages/learn/responding-to-events.md
index 1df37d274a..9ad4770ddf 100644
--- a/beta/src/pages/learn/responding-to-events.md
+++ b/beta/src/pages/learn/responding-to-events.md
@@ -363,7 +363,7 @@ button { margin: 5px; }
 
 </Gotcha>
 
-### 停止传播 {/*event-propagation*/}
+### 停止传播 {/*stopping-propagation*/}
 
 事件处理函数接收一个 **事件对象** 作为它们唯一的参数。按照惯例，它通常被称为 `e` ，代表 "event"（事件）。你可以使用此对象来读取有关事件的信息。
 

From adf6f089ccae4dfc2a67bff6a5b81581f3ba65a7 Mon Sep 17 00:00:00 2001
From: Jiacheng Dong <43509711+Jiacheng787@users.noreply.github.com>
Date: Tue, 16 Nov 2021 10:49:29 +0800
Subject: [PATCH 08/13] Apply suggestions from code review

Co-authored-by: QiChang Li <github@liqichang.com>
---
 beta/src/pages/learn/responding-to-events.md | 52 ++++++++++----------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/beta/src/pages/learn/responding-to-events.md b/beta/src/pages/learn/responding-to-events.md
index 9ad4770ddf..bbfb62f4cd 100644
--- a/beta/src/pages/learn/responding-to-events.md
+++ b/beta/src/pages/learn/responding-to-events.md
@@ -134,7 +134,7 @@ button { margin-right: 10px; }
 
 ### 在事件处理函数中读取 props {/*reading-props-in-event-handlers*/}
 
-因为事件处理函数是在组件内部声明的，所以他们可以访问组件的 props 。下面是一个按钮，在点击时会显示带有其 `message` prop 的 alert ：
+由于事件处理函数是声明于组件内部，因此他们可以直接访问组件的 props。示例中的按钮，当点击时会弹出带有 `message` prop 的 alert：
 
 <Sandpack>
 
@@ -171,9 +171,9 @@ button { margin-right: 10px; }
 
 ### 将事件处理函数作为 props 传递 {/*passing-event-handlers-as-props*/}
 
-通常，你会希望让父组件指定子组件的事件处理函数。考虑按钮：根据你使用 `Button` 组件的位置，你可能想要执行不同的功能——也许一个播放电影，另一个上传图片。
+通常，我们会在父组件中定义子组件的事件处理函数。比如：置于不同位置的 `Button` 组件，可能最终执行的功能也不同 —— 也许是播放电影，也许是上传图片。
 
-为此，将组件从其父组件接收的 prop 作为事件处理函数传递，如下所示：
+为此，将组件从父组件接收的 prop 作为事件处理函数传递，如下所示：
 
 <Sandpack>
 
@@ -222,22 +222,22 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-在这里，`Toolbar` 组件渲染了一个 `PlayButton` 组件和 `UploadButton` 组件：
+示例中，`Toolbar` 组件渲染了一个 `PlayButton` 组件和 `UploadButton` 组件：
 
 - `PlayButton` 将 `handlePlayClick` 作为 `onClick` prop 传入 `Button` 组件内部。
 - `UploadButton` 将 `() => alert('正在上传！')` 作为 `onClick` prop 传入 `Button` 组件内部。
 
-最后，你的 `Button` 组件接收一个名为 `onClick` 的 prop 。它直接将这个 prop 以 `onClick={onClick}` 方式传递给浏览器内置的 `<button>` 。这告诉 React 在点击时调用传入的函数。
+最后，你的 `Button` 组件接收一个名为 `onClick` 的 prop。它直接将这个 prop 以 `onClick={onClick}` 方式传递给浏览器内置的 `<button>`。当点击按钮时，React 会调用传入的函数。
 
-如果你使用一个 [设计系统](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969)，按钮等组件通常包含样式但不指定行为。相反，类似 `PlayButton` 和 `UploadButton` 的组件会向下传递事件处理函数。
+如果你遵循某个 [设计系统](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969) 时，类似于按钮这类的组件，通常会包含样式但不指定行为。而类似 `PlayButton` 和 `UploadButton` 这类的组件则会向下传递事件处理函数。
 
 ### 命名事件处理函数 prop {/*naming-event-handler-props*/}
 
-内置组件例如 `<button>` 和 `<div>` 仅支持 [浏览器事件名称](/reference/reactdom-api) ，例如 `onClick` 。但是，当你构建自己的组件时，你可以按你喜欢的任何方式命名它们的事件处理函数 props 。
+内置组件（`<button>` 和 `<div>`）仅支持 [浏览器事件名称](/reference/reactdom-api)，例如 `onClick`。但是，当你构建自己的组件时，你可以按你个人喜好命名事件处理函数的 prop。
 
 > 按照惯例，事件处理函数 props 应该以 `on` 开头，后跟一个大写字母。
 
-例如，这个 `Button` 组件的 `onClick` prop 可以被命名为 `onSmash` ：
+例如，`Button` 组件的 `onClick` prop 可以被命名为 `onSmash`：
 
 <Sandpack>
 
@@ -270,9 +270,9 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-在这里例子中，`<button onClick={onSmash}>` 表明浏览器内置的 `<button>`（小写）仍然需要一个 `onClick` prop ，但是你自定义的 `Button` 组件接收到的 prop 名称由你决定！
+上述示例中，`<button onClick={onSmash}>` 代表浏览器内置的 `<button>`（小写）仍然需要使用 `onClick` prop，而自定义的 `Button` 组件接收到的 prop 名称可由你决定！
 
-当你的组件支持多种交互时，你可以用应用程序特定的概念命名事件处理函数 prop 。例如，一个 `Toolbar` 组件接收 `onPlayMovie` 和 `onUploadImage` 两个事件处理函数：
+当你的组件支持多种交互时，你可以根据不同的应用程序命名事件处理函数 prop。例如，一个 `Toolbar` 组件接收 `onPlayMovie` 和 `onUploadImage` 两个事件处理函数：
 
 <Sandpack>
 
@@ -314,7 +314,7 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-请注意 `App` 组件不需要知道 `Toolbar` 将会对 `onPlayMovie` 和 `onUploadImage` 做 *什么* 。上面是一个 `Toolbar` 的实现细节。在这里，`Toolbar` 将它们作为 `onClick` 处理函数向下传递给它的 `Button` ，但也可以稍后通过快捷键触发它们。用应用程序特定的交互方式（如 `onPlayMovie`）来命名 prop ，可以让你灵活地更改以后使用它们的方式。
+请注意，`App` 组件并不需要知道 `Toolbar` 将会对 `onPlayMovie` 和 `onUploadImage` 做 **什么** 。上述示例是 `Toolbar` 的实现细节。其中，`Toolbar` 将它们作为 `onClick` 处理函数传递给了 `Button` 组件，其实还可以通过键盘快捷键来触发它们。根据应用程序特定的交互方式（如 `onPlayMovie`）来命名 prop ，可以让你灵活地更改以后使用它们的方式。
 
 ## 事件传播 {/*event-propagation*/}
 
@@ -322,9 +322,9 @@ button { margin-right: 10px; }
 // TODO illo
 -->
 
-事件处理函数还将捕获来自组件可能拥有的任何子组件的事件。我们说一个事件“冒泡”或“传播”到树的上方：它从事件发生的地方开始，然后沿着树向上传播。
+事件处理函数还将捕获任何来自子组件的事件。通常，我们会说事件“冒泡”或“传播”到树的上方：它从事件发生的地方开始，然后沿着树向上传播。
 
-下面这个 `<div>` 包含两个按钮。`<div>` *和* 每个按钮都有自己的 `onClick` 处理函数。你认为点击按钮时会触发哪些处理函数？
+下面这个 `<div>` 包含两个按钮。`<div>` **和** 每个按钮都有自己的 `onClick` 处理函数。你认为点击按钮时会触发哪些处理函数？
 
 <Sandpack>
 
@@ -355,19 +355,19 @@ button { margin: 5px; }
 
 </Sandpack>
 
-如果你点击任一按钮，它自身的 `onClick` 将首先执行，然后是父级 `<div>` 的 `onClick` 。所以会出现两条消息。如果你点击 toolbar 本身，只有父级 `<div>` 的 `onClick` 会执行。
+如果你点击任一按钮，它自身的 `onClick` 将首先执行，然后是父级 `<div>` 的 `onClick`。因此会出现两条消息。如果你点击 toolbar 本身，将只有父级 `<div>` 的 `onClick` 会执行。
 
 <Gotcha>
 
-在 React 中所有事件都会传播，除了 `onScroll` ，它仅适用于你附加到的 JSX 标签。
+在 React 中所有事件都会传播，除了 `onScroll`，它仅适用于你附加到的 JSX 标签。
 
 </Gotcha>
 
-### 停止传播 {/*stopping-propagation*/}
+### 阻止传播 {/*stopping-propagation*/}
 
-事件处理函数接收一个 **事件对象** 作为它们唯一的参数。按照惯例，它通常被称为 `e` ，代表 "event"（事件）。你可以使用此对象来读取有关事件的信息。
+事件处理函数接收一个 **事件对象** 作为唯一的参数。按照惯例，它通常被称为 `e` ，代表 "event"（事件）。你可以使用此对象来读取有关事件的信息。
 
-这个事件对象还允许你停止传播。如果你想阻止一个事件到达父组件，你需要像下面 `Button` 组件那样调用 `e.stopPropagation()` ：
+这个事件对象还允许你阻止传播。如果你想阻止一个事件到达父组件，你需要像下面 `Button` 组件那样调用 `e.stopPropagation()` ：
 
 <Sandpack>
 
@@ -413,12 +413,12 @@ button { margin: 5px; }
 
 1. React 调用了传递给 `<button>` 的 `onClick` 处理函数。
 2. 定义在 `Button` 中的处理函数执行了如下操作：
-   * 调用 `e.stopPropagation()` ，防止事件进一步冒泡。
-   * 调用 `onClick` 函数，它是从 `Toolbar` 组件传递过来的 prop 。
-3. 在 `Toolbar` 组件中定义的函数，显示按钮对应的 alert 。
-4. 由于传播被停止，父级 `<div>` 的 `onClick` 处理函数不会执行。
+   * 调用 `e.stopPropagation()`，阻止事件进一步冒泡。
+   * 调用 `onClick` 函数，它是从 `Toolbar` 组件传递过来的 prop。
+3. 在 `Toolbar` 组件中定义的函数，显示按钮对应的 alert。
+4. 由于传播被阻止，父级 `<div>` 的 `onClick` 处理函数不会执行。
 
-由于 `e.stopPropagation()` ，点击按钮现在仅显示一个 alert（来自 `<button>`）而不是其中的两个（来自 `<button>` 和父级 toolbar `<div>`）。点击按钮与点击周围的 toolbar 不同，因此停止传播对这个 UI 是有意义的。
+由于调用了 `e.stopPropagation()`，点击按钮现在将只显示一个 alert（来自 `<button>`），而并非两个（分别来自 `<button>` 和父级 toolbar `<div>`）。点击按钮与点击周围的 toolbar 不同，因此阻止传播对这个 UI 是有意义的。
 
 <DeepDive title="捕获阶段的事件">
 
@@ -426,7 +426,7 @@ button { margin: 5px; }
 // TODO Illo
 -->
 
-极少数情况下，你可能需要捕获子元素上的所有事件，*即使它们停止了传播* 。例如，你可能希望将每次点击记录到分析中，而不管传播逻辑是什么。你可以通过在事件名称末尾添加 `Capture` 来实现：
+极少数情况下，你可能需要捕获子元素上的所有事件，**即便它们阻止了传播**。例如，你可能希望将每次点击进行埋点记录中，而不管传播逻辑是什么。你可以通过在事件名称末尾添加 `Capture` 来实现：
 
 ```js
 <div onClickCapture={() => { /* 这会首先执行 */ }}>
@@ -445,9 +445,9 @@ button { margin: 5px; }
 
 </DeepDive>
 
-### 传递处理函数作为传播的替代方案 {/*passing-handlers-as-alternative-to-propagation*/}
+### 传递处理函数作为事件传播的替代方案 {/*passing-handlers-as-alternative-to-propagation*/}
 
-注意这个点击事件处理函数如何执行一行代码 _然后_ 调用父组件传递的 `onClick` prop ：
+注意，此处的点击事件处理函数先执行了一行代码，**然后**调用了父组件传递的 `onClick` prop：
 
 ```js {4,5}
 function Button({ onClick, children }) {

From d1fe369a509af9ba12b9ec3ac781d18b1e7cdcc7 Mon Sep 17 00:00:00 2001
From: Jiacheng Dong <43509711+Jiacheng787@users.noreply.github.com>
Date: Sun, 21 Nov 2021 19:12:16 +0800
Subject: [PATCH 09/13] Apply suggestions from code review

Co-authored-by: QiChang Li <github@liqichang.com>
---
 beta/src/pages/learn/responding-to-events.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/beta/src/pages/learn/responding-to-events.md b/beta/src/pages/learn/responding-to-events.md
index bbfb62f4cd..8d9acda095 100644
--- a/beta/src/pages/learn/responding-to-events.md
+++ b/beta/src/pages/learn/responding-to-events.md
@@ -462,13 +462,13 @@ function Button({ onClick, children }) {
 }
 ```
 
-你也可以在调用父元素 `onClick` 函数之前向这个处理函数添加更多代码。此模式为传播提供了一个 *替代方案* 。它让子组件处理事件，同时也让父组件指定一些额外的行为。与传播不同，它不是自动的。但是这种模式的好处是，你可以清楚地跟踪作为某个事件执行的整个调用链。
+你也可以在调用父元素 `onClick` 函数之前，向这个处理函数添加更多代码。此模式是事件传播的另一种 *替代方案* 。它让子组件处理事件，同时也让父组件指定一些额外的行为。与事件传播不同，它并非自动。但是使用这种模式的好处是，你可以清楚地追踪某个事件的结果，以及整个调用链的执行。
 
-如果你依赖于传播，而且很难追踪哪些处理程序在执行，以及执行的原因，可以试试这种方法。
+如果你依赖于事件传播，而且很难追踪哪些处理程序在执行，及其执行的原因，可以尝试这种方法。
 
 ### 阻止默认行为 {/*preventing-default-behavior*/}
 
-某些浏览器事件具有与其关联的默认行为。例如，点击 `<form>` 表单内部的按钮会触发表单提交事件，默认情况下将重新加载整个页面：
+某些浏览器事件具有与事件相关联的默认行为。例如，点击 `<form>` 表单内部的按钮会触发表单提交事件，默认情况下将重新加载整个页面：
 
 <Sandpack>
 
@@ -489,7 +489,7 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-你可以调用事件对象上的 `e.preventDefault()` 来阻止这种情况发生：
+你可以调用事件对象中的 `e.preventDefault()` 来阻止这种情况发生：
 
 <Sandpack>
 
@@ -513,14 +513,14 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-不要混淆 `e.stopPropagation()` 和 `e.preventDefault()` 。它们都很有用，但是不相关：
+不要混淆 `e.stopPropagation()` 和 `e.preventDefault()`。它们都很有用，但是不相关：
 
 * [`e.stopPropagation()`](https://developer.mozilla.org/docs/Web/API/Event/stopPropagation) 停止触发附加到标签之外的事件处理函数。
-* [`e.preventDefault()` ](https://developer.mozilla.org/docs/Web/API/Event/preventDefault) 阻止少数事件的默认浏览器行为。
+* [`e.preventDefault()`](https://developer.mozilla.org/docs/Web/API/Event/preventDefault) 阻止少数事件的默认浏览器行为。
 
 ## 事件处理函数可以包含副作用吗？ {/*can-event-handlers-have-side-effects*/}
 
-当然了！事件处理函数是产生副作用的最佳位置。
+当然可以！事件处理函数是产生副作用的最佳位置。
 
 与渲染函数不同，事件处理函数不需要是 [纯函数](/learn/keeping-components-pure) ，因此它是 *更改* 某些内容的好地方——例如，更改输入值以响应键入，或者更改列表以响应按钮按下。但是，为了更改某些信息，你首先需要某种方式存储它。在 React 中，这是通过 [state, a component's memory](/learn/state-a-components-memory) 来完成的。你将在下一页了解所有相关信息。
 

From 83c5fa0f4c8bf44f0c1c9cfd1a2e4b5d9253b6cf Mon Sep 17 00:00:00 2001
From: Jiacheng Dong <43509711+Jiacheng787@users.noreply.github.com>
Date: Sun, 21 Nov 2021 21:02:16 +0800
Subject: [PATCH 10/13] Apply suggestions from code review

Co-authored-by: QiChang Li <github@liqichang.com>
---
 beta/src/pages/learn/responding-to-events.md | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/beta/src/pages/learn/responding-to-events.md b/beta/src/pages/learn/responding-to-events.md
index 8d9acda095..da00dcbc57 100644
--- a/beta/src/pages/learn/responding-to-events.md
+++ b/beta/src/pages/learn/responding-to-events.md
@@ -522,19 +522,19 @@ button { margin-left: 5px; }
 
 当然可以！事件处理函数是产生副作用的最佳位置。
 
-与渲染函数不同，事件处理函数不需要是 [纯函数](/learn/keeping-components-pure) ，因此它是 *更改* 某些内容的好地方——例如，更改输入值以响应键入，或者更改列表以响应按钮按下。但是，为了更改某些信息，你首先需要某种方式存储它。在 React 中，这是通过 [state, a component's memory](/learn/state-a-components-memory) 来完成的。你将在下一页了解所有相关信息。
+与渲染函数不同，事件处理函数不需要是 [纯函数](/learn/keeping-components-pure)，因此它是 *更改* 某些内容的绝佳之选。例如，更改输入框的值以响应键入，或者更改列表以响应按钮的触发。但是，为了更改某些信息，你首先需要某种方式存储它。在 React 中，这是通过 [state（�组件的缓存）](/learn/state-a-components-memory) 来完成的。你将在下一章节了解所有相关信息。
 
 <Recap>
 
 * 你可以通过将函数作为 prop 传递给元素如 `<button>` 来处理事件。
-* 必须传递事件处理函数，**而不是调用！** `onClick={handleClick}` ，不是 `onClick={handleClick()}` 。
+* 必须传递事件处理函数，**而非函数调用！** `onClick={handleClick}` ，不是 `onClick={handleClick()}`。
 * 你可以单独或者内联定义事件处理函数。
-* 事件处理函数在组件内部定义，所以它们可以访问 props 。
-* 你可以在父组件中定义一个事件处理函数，并将其作为 prop 传递给子元素。
-* 你可以使用应用程序特定的名称定义自己的事件处理函数 prop 。
-* 事件向上传播。在第一个参数上调用 `e.stopPropagation()` 来防止这种情况。
+* 事件处理函数在组件内部定义，所以它们可以访问 props。
+* 你可以在父组件中定义一个事件处理函数，并将其作为 prop 传递给子组件。
+* 你可以根据特定于应用程序的名称定义事件处理函数的 prop。
+* 事件向上传播。通过事件的第一个参数调用 `e.stopPropagation()` 来防止这种情况。
 * 事件可能具有不需要的浏览器默认行为。调用 `e.preventDefault()` 来阻止这种情况。
-* 从子组件显式调用事件处理函数 prop 是传播的一个很好的替代方案。
+* 从子组件显式调用事件处理函数 prop 是事件传播的另一种优秀替代方案。
 
 </Recap>
 
@@ -544,7 +544,7 @@ button { margin-left: 5px; }
 
 ### 修复一个事件处理函数 {/*fix-an-event-handler*/}
 
-点击这个按钮应该可以在白色和黑色之间切换页面背景。然而，当你点击它时，什么也没有发生。解决这个问题。（不用担心 `handleClick` 里面的逻辑——那部分很好。）
+点击此按钮理论上应该在黑白主题之间切换页面背景。然而，当你点击它时，什么也没有发生。解决这个问题。（无需担心 `handleClick` 的内部逻辑。）
 
 <Sandpack>
 
@@ -571,7 +571,7 @@ export default function LightSwitch() {
 
 <Solution>
 
-这是由于 `<button onClick={handleClick()}>` 在渲染过程中 _调用_ 了 `handleClick` 函数而不是 _传递_ 它。移除 `()` 调用改为 `<button onClick={handleClick}>` 进而修复问题：
+这是由于 `<button onClick={handleClick()}>` 在渲染过程中 _调用_ 了 `handleClick` 函数，而没有将其进行 _传递_。移除 `()` 调用改为 `<button onClick={handleClick}>` 进而修复问题：
 
 <Sandpack>
 
@@ -623,7 +623,7 @@ export default function LightSwitch() {
 
 </Solution>
 
-### 连接事件 {/*wire-up-the-events*/}
+### 关联事件 {/*wire-up-the-events*/}
 
 这个 `ColorSwitch` 组件渲染一个按钮。它应该改变页面颜色。将它与从父组件接收的 `onChangeColor` 事件处理函数 prop 连接，以便在点击按钮时改变颜色。
 

From d6b7a9184dff1d7ca464d7eef3beaedbc109e1d8 Mon Sep 17 00:00:00 2001
From: Jiacheng Dong <43509711+Jiacheng787@users.noreply.github.com>
Date: Sun, 21 Nov 2021 21:03:07 +0800
Subject: [PATCH 11/13] Apply suggestions from code review

Co-authored-by: QiChang Li <github@liqichang.com>
---
 beta/src/pages/learn/responding-to-events.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/responding-to-events.md b/beta/src/pages/learn/responding-to-events.md
index da00dcbc57..268361438f 100644
--- a/beta/src/pages/learn/responding-to-events.md
+++ b/beta/src/pages/learn/responding-to-events.md
@@ -625,7 +625,7 @@ export default function LightSwitch() {
 
 ### 关联事件 {/*wire-up-the-events*/}
 
-这个 `ColorSwitch` 组件渲染一个按钮。它应该改变页面颜色。将它与从父组件接收的 `onChangeColor` 事件处理函数 prop 连接，以便在点击按钮时改变颜色。
+`ColorSwitch` 组件渲染了一个按钮。它应该改变页面颜色。将它与从父组件接收的 `onChangeColor` 事件处理函数关联，以便在点击按钮时改变颜色。
 
 在你这样做了之后，你会发现点击按钮也会增加页面点击计数器的值。编写父组件的同事坚持 `onChangeColor` 不会增加计数器的值。还发生了什么呢？修复它，使点击按钮 *只* 改变颜色，并且 _不_ 增加计数器。
 

From 590441e3fb50d9cb308d02088937d5571d29aa53 Mon Sep 17 00:00:00 2001
From: Jiacheng Dong <43509711+Jiacheng787@users.noreply.github.com>
Date: Sun, 21 Nov 2021 21:15:03 +0800
Subject: [PATCH 12/13] Apply suggestions from code review

Co-authored-by: QiChang Li <github@liqichang.com>
---
 beta/src/pages/learn/responding-to-events.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/responding-to-events.md b/beta/src/pages/learn/responding-to-events.md
index 268361438f..3492c146e9 100644
--- a/beta/src/pages/learn/responding-to-events.md
+++ b/beta/src/pages/learn/responding-to-events.md
@@ -681,7 +681,7 @@ export default function App() {
 
 <Solution>
 
-首先，你需要添加事件处理函数，例如 `<button onClick={onChangeColor}>` 。
+首先，你需要添加事件处理函数，例如 `<button onClick={onChangeColor}>`。
 
 但是，这里引入了增加计数器的问题。如果正如你的同事所坚持的那样，`onChangeColor` 不这样做，那么问题在于这个事件向上传播，并且上面的某些事件处理函数会这样做。为了解决这个问题，你需要停止传播。但是不要忘记你仍然应该调用 `onChangeColor` 。
 

From de367bef317962df222f64ce8b5b3c2ddbcb39d4 Mon Sep 17 00:00:00 2001
From: Jiacheng Dong <43509711+Jiacheng787@users.noreply.github.com>
Date: Sun, 21 Nov 2021 22:09:40 +0800
Subject: [PATCH 13/13] Apply suggestions from code review

Co-authored-by: QiChang Li <github@liqichang.com>
---
 beta/src/pages/learn/responding-to-events.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/beta/src/pages/learn/responding-to-events.md b/beta/src/pages/learn/responding-to-events.md
index 3492c146e9..47526ded1e 100644
--- a/beta/src/pages/learn/responding-to-events.md
+++ b/beta/src/pages/learn/responding-to-events.md
@@ -542,7 +542,7 @@ button { margin-left: 5px; }
 
 <Challenges>
 
-### 修复一个事件处理函数 {/*fix-an-event-handler*/}
+### 修复事件处理函数 {/*fix-an-event-handler*/}
 
 点击此按钮理论上应该在黑白主题之间切换页面背景。然而，当你点击它时，什么也没有发生。解决这个问题。（无需担心 `handleClick` 的内部逻辑。）
 
@@ -627,7 +627,7 @@ export default function LightSwitch() {
 
 `ColorSwitch` 组件渲染了一个按钮。它应该改变页面颜色。将它与从父组件接收的 `onChangeColor` 事件处理函数关联，以便在点击按钮时改变颜色。
 
-在你这样做了之后，你会发现点击按钮也会增加页面点击计数器的值。编写父组件的同事坚持 `onChangeColor` 不会增加计数器的值。还发生了什么呢？修复它，使点击按钮 *只* 改变颜色，并且 _不_ 增加计数器。
+如此操作后，你会发现点击按钮时，也会增加页面点击计数器的值。而编写父组件的同事坚持认为 `onChangeColor` 不应该使得计数器的值递增。应该如何处理？修改问题使得点击按钮 **只** 改变颜色，并且 **不** 增加计数器。
 
 <Sandpack>
 
@@ -683,7 +683,7 @@ export default function App() {
 
 首先，你需要添加事件处理函数，例如 `<button onClick={onChangeColor}>`。
 
-但是，这里引入了增加计数器的问题。如果正如你的同事所坚持的那样，`onChangeColor` 不这样做，那么问题在于这个事件向上传播，并且上面的某些事件处理函数会这样做。为了解决这个问题，你需要停止传播。但是不要忘记你仍然应该调用 `onChangeColor` 。
+然而，同时又引入了计数器递增的问题。正如你的同事所坚持的那样，`onChangeColor` 并不符合预期，这主要是因为事件发生向上传播，并且上层的某些事件处理函数执行了递增操作。为了解决这个问题，你需要阻止事件冒泡。但是不要忘记调用 `onChangeColor`。
 
 <Sandpack>