在react中,事件处理的写法和处理方式可能会和vue以及传统html有些不同。

一、事件名和默认行为阻止

事件名采用驼峰写法,并且方法名用大括号引入,而不是双引号:

<button onClick={activateLasers}>
Activate Lasers
</button>

对于类似a标签的默认跳转事件:

handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);

二、绑定事件

由于作用域的问题,tick函数得卸载外面,这样一来,也就不能操作App这个类下面的所有属性以及事件了。so,那就放里面?

哈哈,undefined,对此解决方法有三种:

①手动绑定this

②采用属性初始化器语法

③性能问题的第三种

onClick={(e) => this.handleClick(e)}

使用这个语法有个问题就是每次组件渲染的时候都会创建一个不同的回调函数。在大多数情况下,这没有问题。然而如果这个回调函数作为一个属性值传入低阶组件,这些组件可能会进行额外的重新渲染。我们通常建议在构造函数中绑定或使用属性初始化器语法来避免这类性能问题。

React之事件处理的更多相关文章

  1. react的事件处理为什么要bind this 改变this的指向?

    react的事件处理会丢失this,所以需要绑定,为什么会丢失this? 首先来看摘自官方的一句话: You have to be careful about the meaning of this ...

  2. react篇章-事件处理

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  3. React 组件的生命周期API和事件处理

    一.简单记录React的组件的简洁的生命周期API: A:实例化期: 一个实例第一次被创建时所调用的API与其它后续实例被创建时所调用的API略有不同. 实例第一次被创建时会调用getDefaultP ...

  4. 浅谈 原生javaScript&&react 实现全局触摸按钮(附带对addeventlistener的了解)

    1.采用原生javaACript 实现全局触摸按钮 首先在控制台输出,观察事件有哪些关于触摸的字段可以使用,然后拿这些字段的数据开始来写方法. 因为要做的是全局触摸按钮,我需要拿到的是按钮时时的坐标位 ...

  5. React 中阻止事件冒泡的问题

    在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达 ...

  6. React事件绑定与解绑

    React中事件分类 React中事件绑定分为两种: 1.直接添加在React元素上的事件,这是React在基于Virtual DOM的基础上实现的符合w3c规范的合成事件(SyntheticEven ...

  7. React Native 入门到原理(详解)

    抛砖引玉(帮你更好的去理解怎么产生的 能做什么) 砖一.动态配置 由于 AppStore 审核周期的限制,如何动态的更改 app 成为了永恒的话题.无论采用何种方式,我们的流程总是可以归结为以下三部曲 ...

  8. react事件机制

    1. react的事件是合成事件((Synethic event),不是原生事件 <button onClick={this.handleClick}></button> &l ...

  9. React总结和遇到的坑

    一.react项目 前端react后端node:https://github.com/GainLoss/react-juejin 前端react后端Pyton:https://github.com/G ...

随机推荐

  1. JAVA基本常识及环境搭建

    JAVA基本常识及环境搭建 常用dos命令行 dir 列出当前目录下的文件以及文件夹 md 创建目录 cd 进入指定目录 cd.. 退回到上一级目录 cd/ 退回到根目录 del 删除文件 删除单个文 ...

  2. Tomcat热部署,Web工程中线程没有终止

    近期项目中,用 jenkins 热部署 web工程时,发现工程中静态持有的线程(将ScheduledExecutorService定时任务存储在静态Map中),导致不定时出现数据库访问事务关闭异常,如 ...

  3. Mybatis中使用自定义的类型处理器处理枚举enum类型

    知识点:在使用Mybatis的框架中,使用自定义的类型处理器处理枚举enum类型 应用:利用枚举类,处理字段有限,可以用状态码,代替的字段,本实例,给员工状态字段设置了一个枚举类 状态码,直接赋值给对 ...

  4. linux(一)export的生命周期

    本文从shell执行的角度分析export变量的生命周期 # 只对当前shell环境起作用,比如通过不同的远程ssh就是不同的shell环境 export k=v 当运行一个.sh文件或者是shell ...

  5. MATLAB 图形图像处理

    theme: MATLAB author: pprp date: 2018/2/2 --- MATLAB 图形图像处理 二维绘图命令 plot 线性空间 plot(t,[x1,x2,x3]) : 在同 ...

  6. 解题报告:hdu1248寒冰王座 - 完全背包模板

    2017-09-03 16:16:38 writer:pprp 完全背包问题:从左向右进行扫描,用一维阵列进行分析 代码如下: /* @theme:hdu1248 寒冰王座 @writer:pprp ...

  7. 编译libmemcached

    php的扩展memcache,不支持cas,所以我们要装memcached扩展,memcached扩展是基于libmemcached,所以要先安装libmemcached 一.下载软件 1.libme ...

  8. Maximal Rectangle, 求矩阵中最大矩形,参考上一题

    问题描述: Given a 2D binary matrix filled with 0's and 1's, find the largest rectangle containing only 1 ...

  9. ThinkPHP开发笔记-模型

    1.模型定义.在ThinkPHP中,可以无需进行任何模型定义.只有在需要封装单独的业务逻辑的时候,模型类才是必须被定义的,因此ThinkPHP在模型上有很多的灵活和方便性,让你无需因为表太多而烦恼. ...

  10. 由angular命令行工具(angular-cli)生成的目录和文件

    e2e目录:是端到端的测试目录,包含基本的测试桩.是用来做自动测试的. src:应用源代码目录.我们写的所有代码都应该在这里面. app:包括应用的组件和模块.我们自己写的绝大部分代码都是写在这个目录 ...