如何优雅地在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 课:函数是一等公民是什么意 ...
随机推荐
- Sass-@if的使用
@if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块.在 Sass 中除了 @if 之,还可以配合 @else ...
- Flutter-Text
text的主要属性有:textAlign,maxLines,overflow等. Text( "hello flutter!", TextAlign:TextAlign.cente ...
- 牛客网NOIP赛前集训营-提高组(第六场) C-树
题目描述 有一棵有 n 个结点的树,每条边有编号为 0,1,2 的三种颜色,刚开始每条边颜色都为 0 . 现在有 3 种操作: \(1\ x\ y\ col\) ,表示询问 \(x\) 到 \(y\) ...
- 12.整合neo4j
neo4j 官网下载: https://neo4j.com/download-center/#community 教程: http://neo4j.com.cn/public/cypher/defau ...
- springboot 操作redis
redis五大类型用法 Redis五大类型:字符串(String).哈希/散列/字典(Hash).列表(List).集合(Set).有序集合(sorted set)五种Controller:@Reso ...
- 微信小程序中显示html富文本的方法
微信小程序中显示html富文本的方法 使用方法:git地址:https://github.com/icindy/wxParse 一.下载wxParse文件 二.在要引入的页面的js文件中,引入文件 j ...
- 查看mysql数据库文件存放位置
show variables like '%basedir%' 也是可以的,这是查找mysql的安装路径
- MySQL/RDS数据如何同步到MaxCompute之实践讲解
摘要:大数据计算服务(MaxCompute,原名ODPS)是阿里云提供的一种快速.完全托管的EB级数据仓库解决方案.本文章中阿里云MaxCompute公有云技术支持人员刘力夺通过一个实验向大家介绍了阿 ...
- AshMap如何让hash保持一致
学Java的都知道hashMap的底层是“链表散列”的数据结构也也可以说是hash表.在put的实话先根据key的hashcode重新计算hash值的,而我们又知道hash是一种算法.所以哈希码并不是 ...
- 正确设置nginx/php-fpm/apache权限 提高网站安全性 防止被挂木马
核心总结:php-fpm/apache 进程所使用的用户,不能是网站文件所有者. 凡是违背这个原则,则不符合最小权限原则. 根据生产环境不断反馈,发现不断有 php网站被挂木马,绝大部分原因是因为权限 ...