专栏首页JavaEdgeReact.js 实战之 事件处理

React.js 实战之 事件处理

React 元素的事件处理和 DOM元素的很相似。但是有一点语法上的不同:

React事件绑定属性的命名采用驼峰式写法,而不是小写。 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法) 例如,传统的 HTML:

React 中稍稍有点不同

在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为。你必须明确的使用 preventDefault。例如,传统的 HTML 中阻止链接默认打开一个新页面,你可以这样写:

在 React,应该这样来写

在这里,e 是一个合成事件。React 根据 W3C spec 来定义这些合成事件,所以你不需要担心跨浏览器的兼容性问题。查看 SyntheticEvent 参考指南来了解更多。

使用 React 的时候通常你不需要使用 addEventListener 为一个已创建的 DOM 元素添加监听器。你仅仅需要在这个元素初始渲染的时候提供一个监听器。

  • 当使用 ES6 class 语法来定义一个组件的时候,事件处理器会成为类的一个方法. 例如,下面的 Toggle 组件渲染一个让用户切换开关状态的按钮:

必须谨慎对待 JSX 回调函数中的 this,类的方法默认是不会绑定this 的. 如果你忘记绑定 this.handleClick 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined.

这并不是 React 的特殊行为;它是函数如何在 JavaScript 中运行的一部分。通常情况下,如果你没有在方法后面添加 () ,例如 onClick={this.handleClick},你应该为这个方法绑定 this

如果使用 bind 让你很烦,这里有两种方式可以解决。如果你正在使用实验性的属性初始化器语法,你可以使用属性初始化器来正确的绑定回调函数:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript 的 this 小结纯粹的函数调用作为对象方法的调用作为构造函数调用apply 调用

    函数的不同使用场合,this有不同的值。 总的来说,this就是函数运行时所在的环境对象。 下面分情况,详细讨论

    JavaEdge
  • 高可用服务架构设计(12) - 基于request cache请求缓存技术优化批量商品数据查询接口

    3、查找是否开启了request cache,是否有请求缓存,如果有缓存,直接取用缓存,返回结果

    JavaEdge
  • 探究synchronized底层原理(基于JAVA8源码分析)实现原理同步代码块Mark WordMonitor

    JavaEdge
  • React Native ios开发第一课

    前言 本篇文章的作用在于帮助你快速上手使用React Native编写iOS应用。如果你现在还不太了解React Native是什么以及Facebook为什么...

    xiangzhihong
  • React常见的15个问题

    在 jsComplete,我们管理一个专门用于帮助编程学习者 slack 帐户。我们常常会收到一些有趣的问题,但大多数问题都是常见问题。 我创建这个资源为了帮助...

    Fundebug
  • ES6+ 开发 React 组件

    在这里简要的说一下这些语言新特性对 React 应用的开发有什么影响,这些 ES6+ 特性使得 React 开发更简单更有趣。 类 迄今为止,最能体现我们使用 ...

    hbbliyong
  • Canvas 进阶(三)ts + canvas 重写”辨色“小游戏

    之前写过一篇文章 ES6 手写一个“辨色”小游戏, 感觉好玩挺不错。岂料评论区大神频出,其中有人指出,打开控制台,输入以下代码:

    小皮咖
  • 1.react的基础知识

    React 的基础之:JSX 语法 react 使用 JSX 语法,js 代码中可以写 HTML 代码。 let myTitle = <h1>Hello, Wo...

    用户1134788
  • 使用reactJS要注意的地方

    虽然react使用的jsx可以html和js混编,但是这里的html用的时候有的地方还是和原来的习惯不太一样。这里汇总一些我已经遇到的不一样,还有其他要注意的地...

    黒之染
  • [PHP] 项目实践中的自动加载实现

    1.使用spl_autoload_register函数注册一个自己定义的自动加载函数 2.当在代码中new一个不存在的类的时候,上面的函数会被调用,不存在的类名...

    陶士涵

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动