React 允许你向 JSX 添加事件处理程序。事件处理程序是你自己的函数，将被触发以响应单击、悬停、聚焦表单输入等交互。vue(@click、@change)

添加事件

首先定义一个函数，然后作为属性传递]到适当的 JSX 标记。

export default function Button() {
  function handleClick() {
    alert('You clicked me!');
  }
  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

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

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

除了 onScroll，所有事件都在 React 中传播，它仅适用于你附加的 JSX 标签。

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

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

事件向上传播。在第一个参数上调用 e.stopPropagation() 以防止出现这种情况。
事件可能有不需要的默认浏览器行为。致电 e.preventDefault() 以防止出现这种情况。

<button onClick={e => { e.stopPropagation(); onClick(); }}> {children}

学习react第三天-响应事件

添加事件