在使用 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. 创建WIFI热点

    @echo off:beginecho 笔记本做无线WiFi程序(首次使用请先设置WiFi帐户.)echo 1.设置WiFi帐户,请按1echo 2.开启WiFi功能,请按2echo 3.闭关WiFi ...

  2. 集腋成裘-01 sublime常用的快捷键

    sublime使用的快捷键 1:Html 结构代码  : Html:xt + tab键 2:补全标签代码   : tab键 3:快速复制一行代码 : Ctrl+shift+d 4:快速选中一行代码 : ...

  3. 步步为营-87-imageAreaSelect插件使用(图片剪切)

    1 引用文件 jquery.imgareaselect.min.cs imgareaselect-default.js 2 代码 <%@ Page Language="C#" ...

  4. 使用CSS选择器定位页面元素

    摘录:http://blog.csdn.net/defectfinder/article/details/51734690 CSS选择器也是一个非常好用的定位元素的方法,甚至比Xpath强大.在自动化 ...

  5. C/C++内存管理器

    C标准库提供了malloc,free,calloc,realloc,C++标准库还提供了new, new[], delete, delete[].这些用来管理内存,看起来够用了,为啥还要自己写一个内存 ...

  6. 使用heptiolabs/eventrouter收集K8S的事件

    k8s的heapster项目中止以后, 事件收集的项目,就推荐使用https://github.com/heptiolabs/eventrouter项目了. 部署文档很简单,但有两个问题要解决: 一, ...

  7. (4).NET CORE微服务 Micro-Service ---- Consul服务发现和消费

    上一章说了  Consul服务注册  现在我要连接上Consul里面的服务 请求它们的API接口 应该怎么做呢? 1.找Consul要一台你需要的服务器 1.1 获取Consul下的所有注册的服务 u ...

  8. MySQL基础一(CMD使用)

    概述 MySQL因可移植行高,安装简单小巧等优点被更多的开发者喜爱.执行MySQL的指令的方式有2种方式,方式一.MySQL的客户端软件比如navicat :方式二.通过Cmd命令: CMD命令执行方 ...

  9. nginx 限制并发访问及请求频率

    0. 1.参考 [工作]Nginx限制IP并发连接数和请求数的研究 Module ngx_http_limit_conn_module Module ngx_http_limit_req_module ...

  10. NEST 之旅 · 开启

    NEST 之旅 · 开启 Version:5.x 英文原文地址:Getting started 说实话,这篇文章翻译的很糟糕.但是我的能力有限,目前只有这个水平,还望各位多指导. NEST 是 Ela ...