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. CentOS7单用户模式修改密码

    以下内容均摘抄自:https://blog.csdn.net/ywd1992/article/details/83538730  亲测有用,谢谢大佬的好文章 1.启动centos系统,并且当在GRUB ...

  2. Git --05 Gitlab使用

    目录 Gitlab使用 01. 外观配置 02. Gitlab汉化配置 03. 注册限制 04. 创建用户及组 05. 创建用户 06. 把用户添加到组 07. 创建项目 08. 推送代码到Gitla ...

  3. 8VC Venture Cup 2017 - Elimination Round - A

    题目链接:http://codeforces.com/contest/755/problem/A 题意:给定一个正整数N,问你是否存在一个数M使得N*M+1不是素数(M的范围在[1,1000]). 思 ...

  4. Python lambda 多变量

    >> x = list(map(lambda x, y: (x>3, y>0), (1,2,3,4,5), (0,1,2,3,4)))>>> x[(False ...

  5. 【leetcode】699. Falling Squares

    题目如下: On an infinite number line (x-axis), we drop given squares in the order they are given. The i- ...

  6. webpack 图片文件处理loader

    目录结构: 引用图片: body { /*background: red;*/ /*background: url("../img/test2.jpg"); 小图片*/ backg ...

  7. FMXUI TEXTVIEW代码设置IMAGEINDEX

    FMXUI作为一个开源的控件,真是DELPHIER的福音,向作者致敬.​TEXTVIEW非常好用,在属性面板中有ImageIndex属性,可以方便设置图标,在实际应用中图标状态需要改变,但在代码设置时 ...

  8. flutter图片组件

    在flutter中,image组件有很多构造函数,常用的包括Image.asset(本地图片)和Image.network(远程图片). 常用属性 不管是显示本地图片还是远程图片,image组件都包含 ...

  9. 01 【零基础入门】html学习笔记(1)

    之前学习了前端的一些基础知识,现在想深入地.精通地学习前端,往前端和全栈工程师方向发展. 之前学习前端主要是通过看视频,结合动手练习.现在认为看书+视频+实践,应该是最高效的学习方法.对于html.c ...

  10. 两个图层一上一下div view

    <view class="main"> <view class="user-info"> </view> <view ...