五. React的处理事件

React元素处理时间跟在DOM元素上处理事件非常相似,但是有一些语法上的区别:

  • React事件使用驼峰命名,而不是全部小写。
  • 通过JSX,你传递一个函数作为事件处理,而并不是一个字符串。
  • 在React中你不能通过"return false"来阻止默认行为,必须明确调用perventDefault()。
  • 在JXS中必须注意this的指向并传给onClick,否则在调用函数时,会是undefined,例如:
    this.handleClick = this.handleClick.bind(this)

注意:如果调用bind使你烦恼,那么有另外两种方法可以解决这个问题:

  1. 使用es6语法:
handleClick = () => {
    console.log('this is:', this);
  }
  1. 在回调时调用箭头函数:
    onClick={(e) => this.handleClick(e)}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 本笔记基于React官方文档,当前React版本号为15.4.0。 1. 安装 1.1 尝试 开始之前可以先去co...
    Awey阅读 12,333评论 14 128
  • GUIDS 第一章 为什么使用React? React 一个提供了用户接口的JavaScript库。 诞生于Fac...
    jplyue阅读 8,983评论 1 11
  • 使用React元素处理事件和在DOM元素上处理事件非常相似。有一些语法差异: React事件使用驼峰式命名,而非小...
    莫铭阅读 1,648评论 0 0
  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 7,870评论 1 18
  •   JavaScript 是一种极其灵活的语言,具有多种使用风格。   一般来说,编写 JavaScript 要么...
    霜天晓阅读 4,140评论 0 0

友情链接更多精彩内容