React之事件处理
在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之事件处理的更多相关文章
- react的事件处理为什么要bind this 改变this的指向?
react的事件处理会丢失this,所以需要绑定,为什么会丢失this? 首先来看摘自官方的一句话: You have to be careful about the meaning of this ...
- react篇章-事件处理
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- React 组件的生命周期API和事件处理
一.简单记录React的组件的简洁的生命周期API: A:实例化期: 一个实例第一次被创建时所调用的API与其它后续实例被创建时所调用的API略有不同. 实例第一次被创建时会调用getDefaultP ...
- 浅谈 原生javaScript&&react 实现全局触摸按钮(附带对addeventlistener的了解)
1.采用原生javaACript 实现全局触摸按钮 首先在控制台输出,观察事件有哪些关于触摸的字段可以使用,然后拿这些字段的数据开始来写方法. 因为要做的是全局触摸按钮,我需要拿到的是按钮时时的坐标位 ...
- React 中阻止事件冒泡的问题
在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达 ...
- React事件绑定与解绑
React中事件分类 React中事件绑定分为两种: 1.直接添加在React元素上的事件,这是React在基于Virtual DOM的基础上实现的符合w3c规范的合成事件(SyntheticEven ...
- React Native 入门到原理(详解)
抛砖引玉(帮你更好的去理解怎么产生的 能做什么) 砖一.动态配置 由于 AppStore 审核周期的限制,如何动态的更改 app 成为了永恒的话题.无论采用何种方式,我们的流程总是可以归结为以下三部曲 ...
- react事件机制
1. react的事件是合成事件((Synethic event),不是原生事件 <button onClick={this.handleClick}></button> &l ...
- React总结和遇到的坑
一.react项目 前端react后端node:https://github.com/GainLoss/react-juejin 前端react后端Pyton:https://github.com/G ...
随机推荐
- 深入学习js之——词法作用域和动态作用域
开篇 当我们在开始学习任何一门语言的时候,都会接触到变量的概念,变量的出现其实是为了解决一个问题,为的是存储某些值,进而,存储某些值的目的是为了在之后对这个值进行访问或者修改,正是这种存储和访问变量的 ...
- java第四周学习总结
学号20145336 <Java程序设计>第4周学习总结 教材学习内容总结 继承 继承符合(Don't Repeat Yourself)原则,即在自己的代码中不要重复自己编写的信息,这在多 ...
- log4j2按日志级别输出到指定文件
在项目中,可能会产生非常多的日志记录,为了方便日志分析,一般可以将日志按级别输出到指定文件,本次就先说说log4j2的实现吧: 1.先加入log4j2依赖包 2.写一个java类进行测试,类文件中仅仅 ...
- CentOS7系统安装配置samba服务
# 查询是否已经安装了Samba rpm -qi samba # 安装 yum -y install samba samba-client samba-common # 添加新用户 useradd s ...
- websocket 重连解决方案
1.websocket 重连的脚本:https://github.com/joewalnes/reconnecting-websocket reconnecting-w ...
- 第十篇:Spark SQL 源码分析之 In-Memory Columnar Storage源码分析之 query
/** Spark SQL源码分析系列文章*/ 前面讲到了Spark SQL In-Memory Columnar Storage的存储结构是基于列存储的. 那么基于以上存储结构,我们查询cache在 ...
- 跟着vamei复习概率论
最近重新看了一下概率论,感觉很多东西都遗忘了,还会陷入各种误区,赶紧的纠正回来. 概率论这块,主要内容包括: 事件.条件概率.随机变量.随机变量的分布函数.概率密度.联合分布.期望.方差.协方差. 我 ...
- shell 数组【了解一下】
数组编程 #!/bin/bash # array soft=( php mysql nginx ) # 输出第一个 echo ${soft[0]} # 输出所有 echo "This sof ...
- WebBrowser与console.log()
在WebBrowser中,页面上的console.log()会影响后续代码的执行. <script>console.log(1); alert("1"); //不执行 ...
- 【nginx】一台nginx服务器多域名配置
Nginx 多域名配置 nginx绑定多个域名可又把多个域名规则写一个配置文件里,也可又分别建立多个域名配置文件,我一般为了管理方便,每个域名建一个文件,有些同类域名也可又写在一个总的配置文件里.一. ...