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为什么要用箭头函数?的更多相关文章

  1. React中的响应式设计思想和事件绑定

    这两个点是react入门非常重要的两个点,以前我们是直接操作dom的形式去做,react的设计思想和以前直接操作dom是完全不同的,react是一个响应式的框架,他在做编程的时候,强调的是我们不要直接 ...

  2. 如何正确地在React中处理事件

    1.构造器内绑定this class MyComponent extends React.Component { constructor(props) { super(props); this.sta ...

  3. React中方法的this绑定

    第一种 在组件(类)的constructor中绑定this class Demo extends Component { constructor(this) { super(this) this.st ...

  4. 在React中使用Redux

    这是Webpack+React系列配置过程记录的第六篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  5. [ES6]react中使用es6语法

    前言 不论是React还是React-native,facebook官方都推荐使用ES6的语法,没在项目中使用过的话,突然转换过来会遇到一些问题,如果还没有时间系统的学习下ES6那么注意一些常见的写法 ...

  6. DIFF算法浅析(三)在react中的实现

    在虚拟dom中diff的实现. 分别从4个方面: DIFF抽象概念(概述.时间复杂性分析) 在Vue2中的实现(版本2.6.11.必要性.执行方式) 在React中的实现(版本16.13.1,必要性. ...

  7. React中diff算法的理解

    React中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DO ...

  8. React:JS中的this和箭头函数

    JS中的this和纯面向对象(java,c++)中的this有点不大一样,其原因就是作用域不同,导致JS中的this的指向不明确,在java中的this指当前对象的this或当前类的this,在JS中 ...

  9. JavaScript深入浅出第1课:箭头函数中的this究竟是什么鬼?

    <JavaScript 深入浅出>系列: JavaScript 深入浅出第 1 课:箭头函数中的 this 究竟是什么鬼? JavaScript 深入浅出第 2 课:函数是一等公民是什么意 ...

随机推荐

  1. thinkphp在 nginx 的conf文件配置

    server { listen 80; server_name www.osd-aisa.com; #charset koi8-r; #access_log logs/host.access.log ...

  2. ftp 上传文件时报 cant open output connection for file "ftp://129.28.149.240/shop/web/index.html". Reason: "550 Permission denied.".

    原因:没有写入权限 修改权限即可 vsftpd.conf vim /etc/vsftpd.conf write_enable=YES #加入这句

  3. 关系型数据库---MYSQL---优化

    1.为什么要进行SQL优化? 1.1 查询性能低 1.2 执行时间过长 1.3 等待时间过长 1.4 SQL写的太差(尤其是多表关联查询) 1.5 索引失效 1.6 服务器参数(缓存.线程数)设置不合 ...

  4. Centos7安装Nginx1.14.0

    一.官网下载 http://nginx.org/en/download.html 版本说明: Nginx官网提供了三个类型的版本 Mainline version:Mainline 是 Nginx 目 ...

  5. 关于12306Bypass-分流抢票

    12306Bypass-分流抢票-2013-15年          官网:http://www.12306bypass.com 分流抢票是一款完全免费的抢票软件,请抵制淘宝贩卖等诈骗行为 作者不会授 ...

  6. delphi 解决RichViewEdit乱码问题

    ⑴ 设置RichViewEdit下面的几个属性: ① RTFReaderProperties → ParaStyleMode → rvrsAddIfNeeded ② RTFReaderProperti ...

  7. LUOGU P3759 [TJOI2017]不勤劳的图书管理员(树套树)

    传送门 解题思路 和以前做过的一道题有点像,就是区间逆序对之类的问题,用的是\(BIT\)套权值线段树,交换时讨论一下计算答案..跑的不如暴力快.. 代码 #include<iostream&g ...

  8. [CSP-S模拟测试]:string(文艺平衡树)

    题目传送门(内部题60) 输入格式 第一行三个数$n,m,k$.第二行一个长度为$n$的串.接下来$m$行每行两个数$L_i$和$R_i$. 输出格式 一个串,表示字典序第$k$小的合法的能被填出的串 ...

  9. 20175120彭宇辰 《Java程序设计》第十周学习总结

    教材内容总结 十二章 Java多线程机制 一.进程与线程.操作系统与进程 -线程不是进程,是比进程更小的执行单位.但与进程不同的是,线程的中断和恢复可以更加节省系统的开销. -线程可以共享进程中的某些 ...

  10. 测开之路五十:monggodb安装与初步使用

    mongodb下载地址:https://www.mongodb.com/download-center Robo3T下载地址:https://robomongo.org/ 安装mongodb 双击无脑 ...