在使用 React 中的 Class extends写法,如果 onClick 绑定一个方法就需要 bind(this),如果使用React.createClass 方法就不需要

解析:

React.createClass 是ES5 的写法默认绑定了 bind 写法

在 ES6 中新增了class,绑定的方法需要绑定 this,如果是箭头函数就不需要绑定 this

示例:

第一种写法:

_handleClick(e){
console.log(this);
}
render(){
return (
<div><h1 onClick={this._handleClick.bind(this)}>点击<h1></div>
)
}

第二种写法:

constructor(props){
super(props);
this._handleClick=this._handleClick.bind(this)
}
_handleClick(e){e}{
console.log(this);
}
render(){
return(
<div><h1 onClick={this._handleClick}>点击</h1></div>
)
}

第三种写法:

  _handleClick=(e)=>{
//使用箭头函数
console.log(this);
}
render(){
return (
<div><h1 onClick={this._handleClick}>点击</h1></div>
)
}

ES6中bind(this)用法说明的更多相关文章

  1. js中bind的用法,及与call和apply的区别

    call和apply的使用和区别不再做阐述,可以参考我的另一篇随笔<JavaScript中call和apply方法的使用>(https://www.cnblogs.com/lcr-smg/ ...

  2. ES6中set的用法回顾

    ES6中的set类似一个数组,但是其中的值都是唯一的,Set本身是一个构造函数,用来生成 Set 数据结构. set函数可以接受一个数组作为参数,用来初始化: const set = new Set( ...

  3. ES6中Class的用法及在微信小程序中的应用实例

    1.ES6的基本用法 ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类.基本上,ES6 的class可以看作只是一个语法糖,它的绝 ...

  4. ES6中的Promise用法

    Node的产生,大大推动了Javascript这门语言在服务端的发展,使得前端人员可以以很低的门槛转向后端开发. 当然,这并不代表迸发成了全栈.全栈的技能很集中,绝不仅仅是前端会写一些HTML和一些交 ...

  5. ES6中const的用法

    const声明一个只读的常量.一旦声明,常量的值就不能改变.且const一旦声明变量,就必须立即初始化,不能留到以后赋值. const的作用域与let命令相同:只在声明所在的块级作用域内有效. con ...

  6. ES6 中set的用法

  7. ES6中Class与export简单用法

    一.Class ES6中的Class用法类似Java的Class用法,但class的本质是js一个function //定义类 class Person { //定义构造方法 constructor( ...

  8. C++标准 bind函数用法与C#简单实现

    在看C++标准程序库书中,看到bind1st,bind2nd及bind的用法,当时就有一种熟悉感,仔细想了下,是F#里提到的柯里化.下面是维基百科的解释:在计算机科学中,柯里化(英语:Currying ...

  9. js中call、apply、bind的用法

    原文链接:http://www.cnblogs.com/xljzlw/p/3775162.html var zlw = { name: "zlw", sayHello: funct ...

随机推荐

  1. OpenCV-Python教程8-图像混合

    一.图片相加 要叠加两张图片,使用cv2.add(),相加两幅图片的形状(高度.宽度.通道数)必须相同.numpy中可以直接用res = img1 + img2相加.但是两者的结果并不相同 impor ...

  2. VUE失去焦点提交修改值

    xxx.vue <input class="ml6 w85 bdr-6 bd-none text-center" type="text" v-model= ...

  3. 让simplejson支持datetime类型的序列化

    simplejson是Python的一个json包,但是觉得有点不爽,就是不能序列化datetime,稍作修改就可以了: 原文:http://blog.csdn.net/hong201/article ...

  4. python练习册 0002随机生成验证

    这个题需要用到random库的方法,不用就会忘,暂把random库的常用方法贴出来 import random import string # 随机整数 # randint(a, b),生成a~b之间 ...

  5. WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform... using builtin-java classes where applicable Exception in thread "main" java.io.IOException: No FileSystem for sc F

    1.执行脚本程序报如下所示的错误: [hadoop@slaver1 script_hadoop]$ hadoop jar web_click_mr_hive.jar com.bie.hive.mr.C ...

  6. kickstart-F

    A题 Anagrams字符串是指两个字符串中都出现相同的字母且这些字母出现的次数相同. 小数据完全可以暴力,遍历A的子串,遍历B的子串,通过bool f(i,j,k,l)计算A[i,j], B[k,l ...

  7. Android抓包方法(转)

    Android抓包方法(转) 作者:Findyou 地址:http://www.cnblogs.com/findyou/p/3491014.html 前言: 做前端测试,基本要求会抓包,会分析请求数据 ...

  8. Logstash过滤分析日志数据/kibanaGUI调试(四)

    [Logstash] [root@localhost ~]# wget https://artifacts.elastic.co/downloads/logstash/logstash-6.3.2.t ...

  9. Codeforces 980F Cactus to Tree 仙人掌 Tarjan 树形dp 单调队列

    原文链接https://www.cnblogs.com/zhouzhendong/p/CF980F.html 题目传送门 - CF980F 题意 给定一个 $n$ 个节点 $m$ 条长为 $1$ 的边 ...

  10. 怎样将一个Long类型的数据转换成字节数组

    直接上代码: //先写进去 long n = 1000000L; ByteArrayOutputStream baos = new ByteArrayOutputStream(); DataOutpu ...