React处理事件

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

  • React 事件使用驼峰命名,而不是全部小写。
    通过 JSX , 你传递一个函数作为事件处理程序,而不是一个字符串
  • 另一个区别是,在 React 中你不能通过返回 false(愚人码头注:即 return false; 语句) 来阻止默认行为。必须明确调用 preventDefault 。例如,对于纯 HTML ,要阻止链接打开一个新页面的默认行为,可以这样写:

当使用一个 ES6 类处理事件

定义一个组件时,通常的一个事件处理程序是类上的一个方法。例如, Toggle
组件渲染一个按钮,让用户在 “ON” 和 "OFF" 状态之间切换:

  • 在JSX回调中你必须注意 this 的指向。 在 JavaScript 中,类方法默认没有 绑定 的。如果你忘记绑定 this.handleClick 并将其传递给onClick,那么在直接调用该函数时,this会是 undefined。
  • 这不是 React 特有的行为;这是 JavaScript 中的函数如何工作的一部分。 一般情况下,如果你引用一个后面没跟 ()的方法,例如 onClick={this.handleClick},那你就应该 绑定(bind) 该方法。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 本笔记基于React官方文档,当前React版本号为15.4.0。 1. 安装 1.1 尝试 开始之前可以先去co...
    Awey阅读 12,327评论 14 128
  • 深入JSX date:20170412笔记原文其实JSX是React.createElement(componen...
    gaoer1938阅读 12,477评论 2 35
  • 最近看了一本关于学习方法论的书,强调了记笔记和坚持的重要性。这几天也刚好在学习React,所以我打算每天坚持一篇R...
    gaoer1938阅读 5,688评论 0 5
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,092评论 19 139
  • GUIDS 第一章 为什么使用React? React 一个提供了用户接口的JavaScript库。 诞生于Fac...
    jplyue阅读 8,982评论 1 11

友情链接更多精彩内容