【React】响应事件

1.添加事件处理函数

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

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

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

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

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

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

<button onClick={handleClick}>

调用一个函数（错误）

<button onClick={handleClick()}>

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

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

2. 事件传播

事件处理函数还将捕获任何来自子组件的事件。通常，我们会说事件会沿着树向上“冒泡”或“传播”：它从事件发生的地方开始，然后沿着树向上传播。
⚠️ 注意：在 React 中所有事件都会传播，除了 onScroll，它仅适用于你附加到的 JSX 标签。
阻止传播
事件处理函数接收一个事件对象作为唯一的参数。按照惯例，它通常被称为 e ，代表 “event”（事件）。你可以使用此对象来读取有关事件的信息。

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

function Button({ onClick, children }) {return (<button onClick={e => {e.stopPropagation();onClick();}}>{children}</button>);
}export default function Toolbar() {return (<div className="Toolbar" onClick={() => {alert('你点击了 toolbar ！');}}><Button onClick={() => alert('正在播放！')}>播放电影</Button><Button onClick={() => alert('正在上传！')}>上传图片</Button></div>);
}