响应事件

添加事件处理程序

🌐 Adding event handlers

要添加一个事件处理程序，你首先需要定义一个函数，然后将其作为属性传递给相应的 JSX 标签。例如，这里有一个尚未执行任何操作的按钮：

🌐 To add an event handler, you will first define a function and then pass it as a prop to the appropriate JSX tag. For example, here is a button that doesn’t do anything yet:

你可以按照以下三个步骤使其在用户单击时显示消息：

🌐 You can make it show a message when a user clicks by following these three steps:

1. 在你的 Button 组件中声明一个名为 handleClick 的函数。
2. 在该函数内部实现逻辑（使用 alert 显示消息）。
3. 将 onClick={handleClick} 添加到 <button> JSX 中。

你定义了 handleClick 函数，然后将其作为属性传递给 <button>。 handleClick 是一个**事件处理器。**事件处理器函数：

🌐 You defined the handleClick function and then passed it as a prop to <button>. handleClick is an event handler. Event handler functions:

• 通常在你的组件内部定义。
• 名称以 handle 开头，后面跟活动名称。

按照惯例，通常将事件处理程序命名为 handle 加上事件名称。你经常会看到 onClick={handleClick}、onMouseEnter={handleMouseEnter} 等等。

🌐 By convention, it is common to name event handlers as handle followed by the event name. You’ll often see onClick={handleClick}, onMouseEnter={handleMouseEnter}, and so on.

或者，你可以在 JSX 中内联定义事件处理程序：

🌐 Alternatively, you can define an event handler inline in the JSX:

<button onClick={function handleClick() {
  alert('You clicked me!');
}}>

或者，更简洁地说，使用箭头函数：

🌐 Or, more concisely, using an arrow function:

<button onClick={() => {
  alert('You clicked me!');
}}>

所有这些样式都是等效的。内联事件处理程序对于短函数来说非常方便。

🌐 All of these styles are equivalent. Inline event handlers are convenient for short functions.

// This alert fires when the component renders, not when clicked!
<button onClick={alert('You clicked me!')}>

<button onClick={() => alert('You clicked me!')}>

在事件处理程序中读取属性

🌐 Reading props in event handlers

因为事件处理程序是在组件内部声明的，所以它们可以访问组件的 props。下面是一个按钮，当点击时，会显示包含其 message prop 的提醒框：

🌐 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:

这让这两个按钮显示不同的消息。试着更改传递给它们的消息。

🌐 This lets these two buttons show different messages. Try changing the messages passed to them.

将事件处理程序作为属性传递

🌐 Passing event handlers as props

通常你会希望父组件指定子组件的事件处理程序。以按钮为例：根据你使用 Button 组件的位置，你可能希望执行不同的函数——也许一个是播放电影，另一个是上传图片。

🌐 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.

为此，传递组件从其父级接收的属性作为事件处理程序，如下所示：

🌐 To do this, pass a prop the component receives from its parent as the event handler like so:

在这里，Toolbar 组件渲染了一个 PlayButton 和一个 UploadButton：

🌐 Here, the Toolbar component renders a PlayButton and an UploadButton:

• PlayButton 将 handlePlayClick 作为 Button 内部的 onClick 属性传递。
• UploadButton 将 () => alert('Uploading!') 作为 Button 内部的 onClick 属性传递。

最后，你的 Button 组件接受一个名为 onClick 的属性。它将该属性直接传递给内置浏览器的 <button>，使用 onClick={onClick}。这告诉 React 在点击时调用传入的函数。

🌐 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.

如果你使用设计系统，像按钮这样的组件通常会包含样式，但不会指定行为。相反，像PlayButton和UploadButton这样的组件会向下传递事件处理程序。

🌐 If you use a design system, 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.

命名事件处理程序属性

🌐 Naming event handler props

内置组件如 <button> 和 <div> 仅支持像 onClick 这样的 浏览器事件名称。然而，当你自己构建组件时，你可以随意命名它们的事件处理属性。

🌐 Built-in components like <button> and <div> only support browser event names like onClick. However, when you’re building your own components, you can name their event handler props any way that you like.

按照惯例，事件处理程序属性应以 on 开头，后跟一个大写字母。

🌐 By convention, event handler props should start with on, followed by a capital letter.

例如，Button 组件的 onClick 属性本可以叫做 onSmash：

🌐 For example, the Button component’s onClick prop could have been called onSmash:

在这个例子中，<button onClick={onSmash}> 显示浏览器 <button>（小写）仍然需要一个名为 onClick 的属性，但你的自定义 Button 组件接收到的属性名由你决定！

🌐 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!

当你的组件支持多种交互时，你可能会为应用特定的概念命名事件处理器属性。例如，这个 Toolbar 组件接收 onPlayMovie 和 onUploadImage 事件处理器：

🌐 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:

注意 App 组件不需要知道 Toolbar 会如何处理 onPlayMovie 或 onUploadImage。那是 Toolbar 的实现细节。在这里，Toolbar 将它们作为 onClick 处理函数传递给它的 Button，但它以后也可以在键盘快捷键上触发它们。将 props 命名为像 onPlayMovie 这样的应用特定交互，可以让你以后灵活地改变它们的使用方式。

🌐 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 Toolbar. Here, Toolbar passes them down as onClick handlers to its Buttons, 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.

事件传播

🌐 Event propagation

事件处理程序还会捕获组件可能拥有的任何子元素的事件。我们说一个事件会“冒泡”或“在树上传播”：它从事件发生的地方开始，然后向上传播到树的其他部分。

🌐 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.

这个 <div> 包含两个按钮。<div> 和每个按钮都有它们自己的 onClick 处理程序。当你点击一个按钮时，你认为哪些处理程序会被触发？

🌐 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?

如果你点击任意一个按钮，它的 onClick 会先运行，然后是父级 <div> 的 onClick。所以会出现两个消息。如果你点击工具栏本身，只有父级 <div> 的 onClick 会运行。

🌐 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.

停止传播

🌐 Stopping propagation

事件处理程序将 事件对象 作为它们的唯一参数。按惯例，它通常被称为 e，代表“事件”。你可以使用此对象来读取有关事件的信息。

🌐 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.

该事件对象还允许你停止传播。如果你想阻止事件到达父组件，你需要像 Button 组件这样调用 e.stopPropagation() ：

🌐 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:

当你点击一个按钮时：

🌐 When you click on a button:

1. React 调用传递给 <button> 的 onClick 处理程序。
2. 在 Button 中定义的该处理程序执行以下操作：
   • 调用 e.stopPropagation()，阻止事件进一步冒泡。
   • 调用 onClick 函数，这是从 Toolbar 组件传递的一个 prop。
3. 该函数在 Toolbar 组件中定义，会显示按钮自身的警告。
4. 由于传播已被停止，父元素 <div> 的 onClick 处理程序不会运行。

由于 e.stopPropagation()，现在点击按钮只会显示一个警告（来自 <button>），而不是两个（来自 <button> 和父工具栏 <div>）。点击按钮与点击周围的工具栏不是一回事，因此停止事件传播对这个用户界面来说是合理的。

🌐 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.

<div onClickCapture={() => { /* this runs first */ }}>
  <button onClick={e => e.stopPropagation()} />
  <button onClick={e => e.stopPropagation()} />
</div>

传递处理程序作为传播的替代方法

🌐 Passing handlers as alternative to propagation

注意这个点击处理程序如何先执行一行代码 然后 调用父组件传递的 onClick 属性：

🌐 Notice how this click handler runs a line of code and then calls the onClick prop passed by the parent:

function Button({ onClick, children }) {
  return (
    <button onClick={e => {
      e.stopPropagation();
      onClick();
    }}>
      {children}
    </button>
  );
}

在调用父级 onClick 事件处理程序之前，你也可以在这个处理程序中添加更多代码。这种模式提供了一种替代传播的方法。它让子组件处理事件，同时也让父组件指定一些额外的行为。与传播不同，它不是自动的。但这种模式的好处是，你可以清晰地跟踪由于某个事件而执行的整个代码链。

🌐 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 of code that executes as a result of some event.

如果你依赖于传播并且很难跟踪执行哪些处理程序以及执行原因，请尝试使用此方法。

🌐 If you rely on propagation and it’s difficult to trace which handlers execute and why, try this approach instead.

阻止默认行为

🌐 Preventing default behavior

某些浏览器事件具有与之关联的默认行为。例如，<form> 提交事件，当其中的按钮被点击时发生，默认情况下会重新加载整个页面：

🌐 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:

你可以在事件对象上调用 e.preventDefault() 来阻止这种情况发生：

🌐 You can call e.preventDefault() on the event object to stop this from happening:

不要混淆 e.stopPropagation() 和 e.preventDefault()。它们都很有用，但彼此无关：

🌐 Don’t confuse e.stopPropagation() and e.preventDefault(). They are both useful, but are unrelated:

• e.stopPropagation() 会阻止附加到上述标签的事件处理程序触发。
• e.preventDefault() 阻止了少数具有默认浏览器行为的事件的默认行为。

事件处理程序可以有副作用吗？

🌐 Can event handlers have side effects?

绝对如此！事件处理程序是副作用最好的地方。

🌐 Absolutely! Event handlers are the best place for side effects.

与渲染函数不同，事件处理程序不需要是纯函数，因此它是修改某些内容的好地方——例如，根据输入内容更改输入值，或根据按钮按下更改列表。然而，为了修改某些信息，你首先需要某种存储方式。在 React 中，这是通过使用状态，一个组件的记忆。来实现的。你将在下一页学习所有相关内容。

🌐 Unlike rendering functions, event handlers don’t need to be 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. You will learn all about it on the next page.