react 学习之路（记）- 响应事件

响应事件

一、添加事件处理函数
1. 定义一个函数

export default function Button() {
  function handleClick() {
    alert('你点击了我！');
  }
  return (
    <button onClick={handleClick}>
      点我
    </button>
  );
}
	事件处理函数的特点：
	1. 通常在你的组件内部定义 比如上述的 handleClick
	2. 名称以 handle 开头，后跟事件名称。
(ps:按照惯例，通常将事件处理程序命名为 handle，后接事件名。你会经常看到 onClick={handleClick}，onMouseEnter={handleMouseEnter} 等。)

其他写法：
1. 内联的事件处理函数：onClick = {function handleClick(){ alert('点击') }}
2. 箭头函数：onClick={()=>{ alert('点击') }}
注意区分 调用函数 跟 传递函数
调用函数：<button onClick={handleClick()}>，渲染时就会立即执行
传递函数：<button onClick={handleClick}>，当点击时才会调用处理执行

2. 将第一步的函数作为 prop 传入 合适的 JSX标签

按照惯例，事件处理函数props应该以 on 开头，后面跟一个大写字母

3. 事件传播

事件处理函数还将捕捉任何来自子组件的时间，通常成为“冒泡”或者“传播”：从事件发生的地方开始，沿着树向上传播（在react中，除了onScroll，外，所有的时间都会传播）
如何组织:
通过事件对象的参数来进行处理。 e.stopPropagtion()

function Button({ onClick, children }) {
	  return (
	    <button onClick={e => {  
	    e.stopPropagation();  // 调用，阻止事件进一步冒泡
	    onClick(); // 调用，从ToolBar 组件传递过来 prop  
	    }}>
     			{children}
   		</button>
		 );
}
export default function Toolbar() {
	  return (
	    <div className="Toolbar" onClick={
	    () => { alert('你点击了 toolbar ！');   // 由于传播被阻止，父级div的 onclick 不会执行
	    }}>
	      <Button onClick={() => alert('正在播放！')}>
	        播放电影
	      </Button>
	      <Button onClick={() => alert('正在上传！')}>
	        上传图片
	      </Button>
	    </div>
	  );
}

捕获阶段事件，很少的情况下，可能需要获取子元素上的所有的事件，即便他们阻止了传播，（例如埋点等，）那么你可通过在事件名称末尾添加 Capture 来实现这一点

<div onClickCapture={() => { /* 这会首先执行 */ }}>
  <button onClick={e => e.stopPropagation()} />
  <button onClick={e => e.stopPropagation()} />
</div>

4. 阻止默认行为

某些浏览器事件具有与事件相关联的默认行为。例如，点击表单提交，默认会重新加载整个页面。
这种情况下 可以调用 e.preventDefault()来阻止

e.stopPropagtion() 和 e.preventfault() 区分

1. e.stopPropagtion() 阻止触发绑定在外层标签上的事件处理函数
2. e.preventDefault() 阻止少数事件的默认浏览器行为

5. 总结

1. 你可以通过将函数作为 prop 传递给元素如 来处理事件。
   必须传递事件处理函数，而非函数调用！ onClick={handleClick} ，不是 onClick={handleClick()}。
2. 你可以单独或者内联定义事件处理函数。
3. 事件处理函数在组件内部定义，所以它们可以访问 props。
4. 你可以在父组件中定义一个事件处理函数，并将其作为 prop 传递给子组件。
5. 你可以根据特定于应用程序的名称定义事件处理函数的 prop。
6. 事件会向上传播。通过事件的第一个参数调用 e.stopPropagation() 来防止这种情况。
7. 事件可能具有不需要的浏览器默认行为。调用 e.preventDefault() 来阻止这种情况。
8. 从子组件显式调用事件处理函数 prop 是事件传播的另一种优秀替代方案。