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() 阻止少数事件的默认浏览器行为。
相关推荐
juruiyuan1111 小时前
FFmpeg3.4 libavcodec协议框架增加新的decode协议
前端
Peter 谭1 小时前
React Hooks 实现原理深度解析:从基础到源码级理解
前端·javascript·react.js·前端框架·ecmascript
周胡杰2 小时前
鸿蒙接入flutter环境变量配置windows-命令行或者手动配置-到项目的创建-运行demo项目
javascript·windows·flutter·华为·harmonyos·鸿蒙·鸿蒙系统
LuckyLay3 小时前
React百日学习计划——Deepseek版
前端·学习·react.js
gxn_mmf3 小时前
典籍知识问答重新生成和消息修改Bug修改
前端·bug
hj10433 小时前
【fastadmin开发实战】在前端页面中使用bootstraptable以及表格中实现文件上传
前端
乌夷3 小时前
axios结合AbortController取消文件上传
开发语言·前端·javascript
晓晓莺歌3 小时前
图片的require问题
前端
码农黛兮_464 小时前
CSS3 基础知识、原理及与CSS的区别
前端·css·css3
水银嘻嘻4 小时前
web 自动化之 Unittest 四大组件
运维·前端·自动化