react之响应事件

); } function Button({ onClick, children }) { return ( {children} ); }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30

添加事件处理函数

如需添加一个事件处理函数，你需要先定义一个函数，然后将其作为prop传入合适的 JSX 标签。例如，这里有一个没有绑定任何事件的按钮：

export default function Button() {
  return (
    
      未绑定任何事件
    
  );
}
1
2
3
4
5
6
7

按照如下三个步骤，即可让它在用户点击时显示消息：

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

export default function Button() {
  function handleClick() {
    alert('你点击了我！');
  }

  return (
    
      点我
    
  );
}
1
2
3
4
5
6
7
8
9
10
11

你可以定义 handleClick 函数然后作为prop传入 button。其中 handleClick是一个事件处理函数。事件处理函数有如下特点：

• 通常在你的组件 内部 定义。
• 名称以 handle 开头，后跟事件名称
• 按照惯例，通常将事件处理程序命名为 handle，后接事件名。你会经常看到 onClick={handleClick}，onMouseEnter={handleMouseEnter} 等。

或者，你也可以在JSX中定义一个内联的事件处理函数：

1
2
3

或者，直接使用更为简洁的箭头函数：

 {
  alert('你点击了我！');
}}>
1
2
3

以上所有方式都是等效的。当函数体较短时，内联事件处理函数会很方便。

陷进

传递给事件处理函数的函数应直接传递，而非调用。例如：

区别很微妙。在第一个示例中，handleClick 函数作为 onClick 事件处理函数传递。这会让 React 记住它，并且只在用户点击按钮时调用你的函数。

在第二个示例中，handleClick() 中最后的 () 会在 渲染 过程中 立即 触发函数，即使没有任何点击。这是因为在 JSX { 和 } 之间的 JavaScript 会立即执行。

当你编写内联代码时，同样的陷阱可能会以不同的方式出现：

如果按如下方式传递内联代码，并不会在点击时触发，而是会在每次组件渲染时触发：

// 这个 alert 在组件渲染时触发，而不是点击时触发！


1
2
3

如果你想要定义内联事件处理函数，请将其包装在匿名函数中，如下所示：

 alert('你点击了我！')}>
1

这里创建了一个稍后调用的函数，而不会在每次渲染时执行其内部代码。

在这两种情况下，你都应该传递一个函数：

• 传递了 handleClick 函数。
• alert('...')}> 传递了 () => alert('...') 函数。

在事件处理函数中读取 props

由于事件处理函数声明于组件内部，因此它们可以直接访问组件的props。示例中的按钮，当点击时会弹出带有message prop的alert:

function AlertButton({ message, children }) {
  return (
     alert(message)}>
      {children}
    
  );
}

export default function Toolbar() {
  return (
    

      
        播放电影
      
      
        上传图片
      
    
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

此处有两个按钮，会展示不同的消息。你可以尝试更改传递给它们的消息。

将事件处理函数作为props传递

通常，我们会在父组件中定义子组件的事件处理函数。比如：置于不同位置的 button 组件，可能最终执行的功能不同 – 也许时播放电影，也许是上传图片。

为此，将组件从父组件接接收的prop作为事件处理函数传递，如下所示：

function Button({ onClick, children }) {
  return (
    
      {children}
    
  );
}

function PlayButton({ movieName }) {
  function handlePlayClick() {
    alert(`正在播放 ${movieName}！`);
  }

  return (
    
      播放 "{movieName}"
    
  );
}

function UploadButton() {
  return (
     alert('正在上传！')}>
      上传图片
    
  );
}

export default function Toolbar() {
  return (
    

      
      
    
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

示例中，Toolbar 组件渲染了一个 PlayButton 组件和 UploadButton 组件：

• PlayButton 将 handlePlayClick 作为 onClick prop 传入 Button 组件内部。
• UploadButton 将 () => alert('正在上传！') 作为 onClick prop 传入 Button 组件内部。

最后，你的 Button 组件接收一个名为 onClick 的 prop。它直接将这个 prop 以 onClick={onClick} 方式传递给浏览器内置的 。当点击按钮时，React 会调用传入的函数。

如果你遵循某个 设计系统 时，按钮之类的组件通常会包含样式，但不会指定行为。而 PlayButton 和 UploadButton 之类的组件则会向下传递事件处理函数。

命名事件处理函数 prop

内置组件（

和

）仅支持 浏览器事件名称，例如 onClick。但是，当你构建自己的组件时，你可以按你个人喜好命名事件处理函数的 prop。

按照惯例，事件处理函数 props 应该以 on 开头，后跟一个大写字母。例如，Button 组件的 onClick prop 本来也可以被命名为 onSmash：

function Button({ onSmash, children }) {
  return (
    

{children} ); } export default function App() { return (

); }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

上述示例中， 代表浏览器内置的 （小写）仍然需要使用 onClick prop，而自定义的 Button 组件接收到的 prop 名称可由你决定！

当你的组件支持多种交互时，你可以根据不同的应用程序命名事件处理函数 prop。例如，一个 Toolbar 组件接收 onPlayMovie 和 onUploadImage 两个事件处理函数：

export default function App() {
  return (
     alert('正在播放！')}
      onUploadImage={() => alert('正在上传！')}
    />
  );
}

function Toolbar({ onPlayMovie, onUploadImage }) {
  return (
    

      

播放电影 上传图片

export default function Toolbar() {
  return (
    
 {
      alert('你点击了 toolbar ！');
    }}>
       alert('正在播放！')}>
        播放电影
      
       alert('正在上传！')}>
        上传图片
      
    
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

function Button({ onClick, children }) {
  return (
     {
      e.stopPropagation();
      onClick();
    }}>
      {children}
    
  );
}

export default function Toolbar() {
  return (
    
 {
      alert('你点击了 toolbar ！');
    }}>
       alert('正在播放！')}>
        播放电影
      
       alert('正在上传！')}>
        上传图片
      
    
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

export default function Signup() {
  return (
     alert('提交表单！')}>
      
      发送
    
  );
}
1
2
3
4
5
6
7
8

export default function Signup() {
  return (
    
 {
      e.preventDefault();
      alert('提交表单！');
    }}>
      
      发送
    
  );
}
1
2
3
4
5
6
7
8
9
10
11