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 ...
随机推荐
- JAVA代码中可使用中文类名,变量名,对象名,方法名.
java程序 兔子 public class 兔子{ //构造方法 public 兔子(){} public void 吃草(){ System.out.println("兔子在吃草&quo ...
- WPF 下两种图片合成或加水印的方式(转载)
来源:http://www.cnblogs.com/lxblog/ 最近项目中应用多次应用了图片合成,为了今后方便特此记下. 在WPF下有两种图片合成的方式,一种还是用原来C#提供的GDI+方式,命名 ...
- [转] iOS9系统自带字体
Family: Thonburi Font: Thonburi-Bold Font: Thonburi Font: Thonburi-Light 1 2 3 4 Family: Khmer Sanga ...
- javascript OOP(上)(八)
一.OOP的概念和继承 1.OOP概念 面向对象程序设计(Object-oriented programming,OOP)是一种程序设计范型,同时也是一种程序开发的方法.对象指的是类的实例.它将对象作 ...
- Spring MVC 注解
概述 Spring MVC是一个采用依赖注入的思想编写.对象的依赖注入Bean的方式可以通过Spring XML里面配置,配置之后的Bean使用时候,无需使用New关键字建立对象.但是如果所有的B ...
- U32592 摘果实
链接:https://www.luogu.org/problemnew/show/U32592 题解: 60-70分 二分+网络流
- HTML LIST 输入框自动查询追加框,自动过滤 HTML5
<!DOCTYPE HTML> <html> <body> <form action="/example/html5/demo_form.asp&q ...
- mySql中SUBSTRING_INDEX函数用法
SUBSTRING_INDEX(str,delim,count) 返回字符串 str 中在第 count 个出现的分隔符 delim 之前的子串.如果 count 是一个正数,返回从最后的(从左边开始 ...
- Python_datetime模块
datetime模块重新封装了time模块,提供更多的接口,提供的类有: date,表示日期的类 time,表示时间的类 datetime,表示日期和时间的类 timedelta,表示时间间隔,即两个 ...
- Vim的合并行操作
日常常用到多行合并的功能,记录如下: 第一种, 多行合并成一行,即: AAAAABBBBBCCCCC 合并为:AAAAA BBBBB CCCCC 方法1: normal状态下 3J 其中的3是范围,可 ...