如何优雅地在React中处理事件响应&&React绑定onClick为什么要用箭头函数?
React绑定onClick为什么要用箭头函数?
https://segmentfault.com/q/1010000010918131
如何优雅地在React中处理事件响应
https://segmentfault.com/a/1190000010308456
一:
事件处理函数使用es6写法:
在使用ES6 classes或者纯函数时,React不会自动绑定this到当前组件上,需要手动实现this的绑定。
handleClick = (i) => {
console.log(i)
}
<p onClick={this.handleClick.bind(this,123)}>iiiii</p>
二:
onClick内部使用箭头函数
箭头函数可以自动绑定定义此函数作用的this,因此不需要bind。
testhhandleClick(){
console.log('testhhandleClick')
}
<p onClick={()=>{this.testhhandleClick()}}>testhhandleClick</p>
如何优雅地在React中处理事件响应&&React绑定onClick为什么要用箭头函数?的更多相关文章
- React中的响应式设计思想和事件绑定
这两个点是react入门非常重要的两个点,以前我们是直接操作dom的形式去做,react的设计思想和以前直接操作dom是完全不同的,react是一个响应式的框架,他在做编程的时候,强调的是我们不要直接 ...
- 如何正确地在React中处理事件
1.构造器内绑定this class MyComponent extends React.Component { constructor(props) { super(props); this.sta ...
- React中方法的this绑定
第一种 在组件(类)的constructor中绑定this class Demo extends Component { constructor(this) { super(this) this.st ...
- 在React中使用Redux
这是Webpack+React系列配置过程记录的第六篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
- [ES6]react中使用es6语法
前言 不论是React还是React-native,facebook官方都推荐使用ES6的语法,没在项目中使用过的话,突然转换过来会遇到一些问题,如果还没有时间系统的学习下ES6那么注意一些常见的写法 ...
- DIFF算法浅析(三)在react中的实现
在虚拟dom中diff的实现. 分别从4个方面: DIFF抽象概念(概述.时间复杂性分析) 在Vue2中的实现(版本2.6.11.必要性.执行方式) 在React中的实现(版本16.13.1,必要性. ...
- React中diff算法的理解
React中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DO ...
- React:JS中的this和箭头函数
JS中的this和纯面向对象(java,c++)中的this有点不大一样,其原因就是作用域不同,导致JS中的this的指向不明确,在java中的this指当前对象的this或当前类的this,在JS中 ...
- JavaScript深入浅出第1课:箭头函数中的this究竟是什么鬼?
<JavaScript 深入浅出>系列: JavaScript 深入浅出第 1 课:箭头函数中的 this 究竟是什么鬼? JavaScript 深入浅出第 2 课:函数是一等公民是什么意 ...
随机推荐
- 02.Linux-CentOS系统NFS挂载时拒绝访问挂载问题
问题: 在挂载nfs时报拒绝访问挂载:mount -t nfs 192.163.1.10:/home/opneuser/upload /home/openuser/upload/ 报错信息:Mount ...
- 激活密钥许可证VMware Workstation Pro 15 激活许可证
虚拟机 VMware Workstation Pro 15.5.0 及永久激活密钥 虚拟机下载地址:https://download3.vmware.com/software/wkst/file/VM ...
- rabbitmq 客户端崩溃退出
1.创建1个队列 和 创建另1个独占队列 名称相同 即崩溃退出 2..rabbitmq是为了实现实时消息推送的吗?
- AbstractQueuedSynchronizer简单使用
AQS是JUC中很多同步组件的构建基础,简单来讲,它内部实现主要是状态变量state和一个FIFO队列来完成,同步队列的头结点是当前获取到同步状态的结点,获取同步状态state失败的线程,会被构造成一 ...
- ElasticSearch(java) 创建索引
搜索]ElasticSearch Java Api(一) -创建索引 标签: elasticsearchapijavaes 2016-06-19 23:25 33925人阅读 评论(30) 收藏 举报 ...
- MySQL Authentication plugin 'caching_sha2_password' cannot be loaded
很多用户在使用Navicat Premium 12连接MySQL数据库时会出现Authentication plugin 'caching_sha2_password' cannot be loade ...
- 通过注释查找mysql的表名
通过注释查找mysql的表名 select * from INFORMATION_SCHEMA.columns where COLUMN_NAME Like '%placement%';
- 51nod 1384:全排列(STL)
题目链接 记住next_permutation函数的用法,另外string在这里比char[]慢好多啊.. //#include<bits/stdc++.h> //using namesp ...
- Android Fastboot 与 Recovery 和刷机 千山万水迷了鹿
1. 首先来看下Android系统的分区: Android系统的分区.jpg Android分区解释.png 安卓系统一般把rom芯片分成7个区,如果再加上内置sd卡这个分区,就是8个: hb ...
- git常用操作命令2
以github为例,测试本地库与远程库github之间的交互 1. 本地初始化一个git库 创建一个test文件夹,然后cd到test文件内, 执行git init命令 初始化本地库成功!! ...