ES6中bind(this)用法说明
在使用 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)用法说明的更多相关文章
- js中bind的用法,及与call和apply的区别
call和apply的使用和区别不再做阐述,可以参考我的另一篇随笔<JavaScript中call和apply方法的使用>(https://www.cnblogs.com/lcr-smg/ ...
- ES6中set的用法回顾
ES6中的set类似一个数组,但是其中的值都是唯一的,Set本身是一个构造函数,用来生成 Set 数据结构. set函数可以接受一个数组作为参数,用来初始化: const set = new Set( ...
- ES6中Class的用法及在微信小程序中的应用实例
1.ES6的基本用法 ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类.基本上,ES6 的class可以看作只是一个语法糖,它的绝 ...
- ES6中的Promise用法
Node的产生,大大推动了Javascript这门语言在服务端的发展,使得前端人员可以以很低的门槛转向后端开发. 当然,这并不代表迸发成了全栈.全栈的技能很集中,绝不仅仅是前端会写一些HTML和一些交 ...
- ES6中const的用法
const声明一个只读的常量.一旦声明,常量的值就不能改变.且const一旦声明变量,就必须立即初始化,不能留到以后赋值. const的作用域与let命令相同:只在声明所在的块级作用域内有效. con ...
- ES6 中set的用法
- ES6中Class与export简单用法
一.Class ES6中的Class用法类似Java的Class用法,但class的本质是js一个function //定义类 class Person { //定义构造方法 constructor( ...
- C++标准 bind函数用法与C#简单实现
在看C++标准程序库书中,看到bind1st,bind2nd及bind的用法,当时就有一种熟悉感,仔细想了下,是F#里提到的柯里化.下面是维基百科的解释:在计算机科学中,柯里化(英语:Currying ...
- js中call、apply、bind的用法
原文链接:http://www.cnblogs.com/xljzlw/p/3775162.html var zlw = { name: "zlw", sayHello: funct ...
随机推荐
- AI学习吧-REDIS-常识
Redis 是一个non-sql,非关系型数据库,数据存放在内存中,支持持久化,redis中的数据会在一段时间内和(mysql等数据库)磁盘进行同步,防止丢失,这样也就降低了读数据效率. Redis和 ...
- Canvas锯齿问题
canvas的宽高必须通过HTML属性指定,不能通过CSS指定,否则会有锯齿 这个是通过CSS定义宽高,绘制的图形 #myCanvas{ background: black; height: 800p ...
- SqlServer2012清除日志文件
SqlServer在使用中会产生大量的日志文件,当不需要的时候可以进行删除. 删除方式: 右键数据库-->任务-->收缩-->文件 进入收缩文件页面,按照如下配置就可以了 有时候收缩 ...
- VS2017远程调试C#或 Visual Studio 中的 Visual Basic 项目
来源:远程调试C#或 Visual Studio 中的 Visual Basic 项目 若要调试已部署在另一台计算机的 Visual Studio 应用程序,安装和在其中部署您的应用程序的计算机上运行 ...
- 435. Non-overlapping Intervals
Given a collection of intervals, find the minimum number of intervals you need to remove to make the ...
- 反射PropertyInfo的简单使用
namespace EF6._0Test { class Program { /// <summary> /// PropertyInfo的简单使用 /// </summary> ...
- 【LGR-052】洛谷9月月赛II(加赛)
题解: 没打... ab题满世界都过了应该没什么意思 c题是个比较有意思的思维题(先看了题解才会的...) 我们考虑这么一件事情 没钥匙的人出门后 门一定是开着的 他进来的时候,门一定是开着的 其他时 ...
- nginx做代理离线下载插件
一.背景 被安装的服务器不能上网,无法下载插件,一个插件都还好,但是遇到插件依赖很强的需要几十个插件的依赖,这样就很麻烦. 二.环境 192.168.182.155 安装nginx 能 ...
- Coolpy网络部署说明(局域网)
本文将介绍Coolpy第一种方案的网络部署方法.以方便大家学习如何让coolpy设备部署到相应的应用场景中.本例将以水星MW310R无线路由器作为演示路由器. 1.局域网部署 即coolpy设备=&g ...
- 配置maven从自己的私服下载jar包nexus、maven私服仓库(二)
配置maven项目从私服下载jar包 pom文件配置从maven私服下载jar包 settings文件配置从maven私服下载jar包 (方便自己关键字搜索,所以多写了几行o(* ̄︶ ̄*)o) 今天自 ...