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. Django--Auth模块使用

    1.Auth模块介绍 1.1 Auth模块是Django自带的用户认证模块,用于处理用户账户.群组.许可和基于cookie的用户回话 Django的认证系统主要包括下面几个部分 1.用户 2.许可 3 ...

  2. prometheus 笔记

    前言 prometheus 是监控应用软件类似于nagios. 安装 1.官网下载prometheus-2.2.0.linux-amd64压缩包,解压,执行./prometheus即可.这里重要的是配 ...

  3. MongoDB 聚合管道

     参见:http://www.cnblogs.com/liruihuan/p/6686570.html MongoDB 的聚合功能,聚合操作主要用于对数据的批量处理,往往将记录按条件分组以后,然后再进 ...

  4. Calendar日历

    Calendar calendar=Calendar.getInstance(); //上一年的今天 calendar.add(Calendar.YEAR,-1); System.out.printl ...

  5. Python3.5-20190503-廖老师-自我笔记

    列表和元组 list1 = [1,4,6,788,345,757]            tuple1 =      (345,234,567,878)         切记你的变量名不能和  hel ...

  6. Codeforces 963B Destruction of a Tree 思维+dfs

    题目大意: 给出一棵树,每次只能摧毁有偶数个度的节点,摧毁该节点后所有该节点连着的边都摧毁,判断一棵树能否被摧毁,若能,按顺序输出摧毁的点,如果有多种顺序,输出一种即可 基本思路: 1)我一开始自然而 ...

  7. leetcode之删除数组中的重复值(26题)

    给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成. 示例 1 ...

  8. Struts2之param标签的使用

    struts2的s:param标签主要有两个属性name与value: 传值 若想在value属性中输入字符串,则可以这样写:<s:param name="tableTitle&quo ...

  9. Prometheus指标采集常用配置

    一.node-exporter配置textfile收集器 textfile收集器作用: 运行暴露自定义指标.例如,需要在某个被监控节点上添加一个地理位置的指标. node-exporter会自动启动t ...

  10. Maven开始

    1:加入Maven插件: 这句话的意思是: 从本地仓库找到相应的jar包 <localRepository>F:\RepMaven</localRepository 2:创建一个Ma ...