React-响应事件

  1. 传递一个正确的函数,JSX 中{} 会直接执行
    <button onClick={handleClick}> 传递了 handleClick
    <button onClick={() => alert('...')}> 传递了箭头函数 () => alert('...')
  2. 通常在你的组件 内部 定义。
    名称以 handle 开头,后跟事件名称
    例如,onClick={handleClick}onMouseEnter={handleMouseEnter}
  3. 按照惯例,事件处理函数 props 应该以 on 开头,后跟一个大写字母。
    例如,Button 组件的 onClick prop 本来也可以被命名为 onSmash onClick={onSmash}
  4. 在 React 中所有事件都会传播,除了 onScroll,它仅适用于你附加到的 JSX 标签。
  5. 如果你想阻止一个事件到达父组件,你需要调用 e.stopPropagation()
  6. 如果你想组织一个默认行为,你需要调用 e.preventDefault()
  7. 不要混淆 e.stopPropagation() 和 e.preventDefault()。它们都很有用,但二者并不相关:
    e.stopPropagation() 阻止触发绑定在外层标签上的事件处理函数。
    e.preventDefault() 阻止少数事件的默认浏览器行为。
相关推荐
jump6807 小时前
width height min-width min-height. 100%. 100vw 100vh的区别
前端
F_Director7 小时前
Webpack性能优化的理论和实践
前端·webpack·性能优化
自由日记7 小时前
css文档流
前端·css·html
AAA不会前端开发7 小时前
JavaScript基础知识(三)数组,对象与其他属性
javascript
2501_938799427 小时前
CSS Container Queries:基于父容器的响应式设计
前端·css
一枚前端小能手7 小时前
🔁 JavaScript中的迭代全攻略 - for/while/迭代器/生成器/for await...of详解
前端·javascript
用户11481867894847 小时前
深入 V8 引擎与浏览器原理:从理论到 Vue 实战的完整指南
前端
spmcor7 小时前
Vue命名冲突:当data和computed相爱相杀...
前端·面试
拉不动的猪7 小时前
单点登录中权限同步的解决方案及验证策略
前端·javascript·面试
znhy@1237 小时前
十三、JS进阶(二)
开发语言·前端·javascript