第一种:官方推荐的:

class LoginControl extends React.Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: false};
}

  

第二种:比较方便

render() {
return (
<div onClick={this.handleClick.bind(this)}>ES6方式创建的组件</div>
);
}

  

第三种:箭头函数

return (
<button onClick={(e) => this.handleClick(e)}>
Click me
</button>
);

  

es6编写reactjs事件处理函数绑定this三种方式的更多相关文章

  1. JavaScript事件绑定的三种方式

    (一)事件绑定的三种方式 (1)通过on的形式 <script type="text/javascript"> var div = document.getElemen ...

  2. JS中事件绑定的三种方式

    以下是搜集的在JS中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="upl ...

  3. JavaScript 中事件绑定的三种方式

    以下是在 JS 中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="uplo ...

  4. javascript函数命名的三种方式及区别

    1, function fn(val1,val2) { alert(val1+val2); } fn(1,2); 2, var fn=function() { alert(val1+val2); } ...

  5. JavaScript中事件绑定的三种方式

    JavaScript使得网页与用户友好交互,在使用 js 进行时间绑定的时候有三种绑定方式. 第一种:初学者以及普通写法 <div id="dom0"> <inp ...

  6. JS事件绑定的三种方式比较

    js事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  7. js中的事件绑定的三种方式

    1 直接在html标签中绑定 <button onclick = "show()"></button> 注意当你引用的js代码是包裹在window.onlo ...

  8. js中函数创建的三种方式

    1.函数声明 function sum1(n1,n2){     return n1+n2;   }; 2.函数表达式,又叫函数字面量 var sum2=function(n1,n2){     re ...

  9. js函数定义的三种方式

    1.函数声明语法 function sum(num1, num2){ return num1 + num2; } 2.函数表达式定义 var sum = function (num1, num2){ ...

随机推荐

  1. JAVA设计模式:模板设计模式

    1.模板设计模式,是为了体现继承的作用.它主要的作用就是在类中定义一些公共的方法和标准,而其具体的实现则叫给其子类来根据子类具体的行为来实现:因为模板设计模式中必经还有一些自己的方法不是抽象的方法,只 ...

  2. android学习17——命令行建gradle工程

    使用命令行建gradle工程要涉及到几个工具的版本. 1.gradle的版本.这个用gradle -version查到. 2.SDK BuildTools的版本. 这个要先配好SDK的环境变量,然后在 ...

  3. Gulp实现css、js、图片的压缩以及css、js文件的MD5命名

    目前做代码压缩合并的工具有很多,诸如gulp,webpack,grunt等等,可以说这些项目构建工具的功能非常之强大:图片压缩.图片转base64.css和js的压缩以及合并,文件的md5重命名 -- ...

  4. linux c++ 加载动态库常用的三种方法

    链接库时的搜索路径顺序:LD_LIBRARY_PATH --> /etc/ld.so.conf --> /lib,/usr/lib 方法1. vi .bash_profile    设置环 ...

  5. [看图说话] 基于Spark UI性能优化与调试——初级篇

    Spark有几种部署的模式,单机版.集群版等等,平时单机版在数据量不大的时候可以跟传统的java程序一样进行断电调试.但是在集群上调试就比较麻烦了...远程断点不太方便,只能通过Log的形式,进行分析 ...

  6. Python3.5 numpy,scipy,安装

    不是特别难,先保证环境变量正确配置 首先,安装了VS2015; 第二,在Python3.5安装路径中有一个Scripts文件夹,里面有pip.exe或者类似的可执行文件,安装一下: 第三,下载相对应的 ...

  7. SQLServer索引循环删除

    declare qc_cursor cursor SCROLL OPTIMISTIC Forselect siteName from tb_vhostcheckopen qc_cursordeclar ...

  8. 3893: [Usaco2014 Dec]Cow Jog

    3893: [Usaco2014 Dec]Cow Jog Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 174  Solved: 87[Submit] ...

  9. 3402: [Usaco2009 Open]Hide and Seek 捉迷藏

    3402: [Usaco2009 Open]Hide and Seek 捉迷藏 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 78  Solved: 6 ...

  10. swift -- 类中的方法

    一. 引用类型  类 在类中定义方法 class Person { //属性 var name : String = "" //方法 //实例方法 : 在类里面创建一个方法 fun ...