添加事件处理函数

添加事件处理函数

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

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

export default function Button() {function handleClick() {alert('你点击了我！');}return (<button onClick={handleClick}>点我</button>);
}

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

1. 通常在你的组件 内部 定义。
2. 名称以 handle 开头，后跟事件名称。

⚠️注意：传递给事件处理函数的函数应直接传递，而非调用。
传递一个函数（正确）

<button onClick={handleClick}>

调用一个函数（错误）

<button onClick={handleClick()}>

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

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