// vscode shift + ctrl + v 预览

es 5 写法

无参函数的绑定

  • first methods

    1. 定义函数:
    handleClick(e) { // e - 事件对象
    e.preventDefault();
    // doSomething ...
    }
    1. constructor 中绑定函数的执行上下文
    this.handleClick = this.handleClick.bind(this);
    1. jsx 中的调用
    <button onClick={this.hanleClick} />
  • second methods
    1. 定义函数
    // 同上
    1. jsx 中的调用
    <button onClick={this.hanleClick.bind(this)} />

有参数的绑定

  • only one

    1. 定义函数
    handleClick(param1, param2, e) {
    e.preventDefault();
    // do something ...
    }

    注意此时无论多少个参数, e 一定放在最后

    1. jsx 中调用
    <button onClick={this.hanleClick.bind(this, 'x', 'xx')} />

es 6 写法

无参数的绑定

  • only one

    1. 定义函数:
    handleClick = (e) => {
    e.preventDefault();
    // do something ...
    }
    1. jsx 中调用
    <button onClick={this.hanleClick} />

    比起 es 5 中的无参数函数的绑定调用, es 6 不需要使用 bind 函数;

有参数函数的绑定

  • first methods

    1. 定义函数:
    handleClick = (param1, e) => {
    e.preventDefault();
    // do something ...
    }
    1. jsx 中调用
    <button onClick={this.hanleClick.bind(this, 'x')} />

    有参数时,在绑定时依然要使用 bind;

    并且参数一定要传,不然仍然存在 this 指向错误问题;

  • second methods
    1. 定义函数:
    handleClick = (param1, e) => {
    // do something ...
    }
    1. jsx 中调用
    <button onClick={() => this.handleClick('c')} />
    // 如果需要对 event 对象进行处理的话,需要写成下面的格式
    <button onClick={(e) => this.handleClick('c', e)} />

react 事件绑定 es5/es6的更多相关文章

  1. 【转】React Native中ES5 ES6写法对照

    很多React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教程和例子都是 ...

  2. React事件绑定的几种方式对比

    React事件绑定 由于类的方法默认不会绑定this,因此在调用的时候如果忘记绑定,this的值将会是undefined.通常如果不是直接调用,应该为方法绑定this.绑定方式有以下几种: 1. 在构 ...

  3. React Native 的ES5 ES6写法对照表

    模块 引用 在ES5里,如果使用CommonJS标准,引入React包基本通过require进行,代码类似这样: //ES5 var React = require("react" ...

  4. React/React Native 的ES5 ES6写法对照表-b

    很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...

  5. react 入坑笔记(四) - React 事件绑定和传参

    React 事件处理 建议:在了解 js 的 this 取值后食用更佳. 一.react 与 Html 中用法的异同和注意点 html 中的绑定事件的写法: <button onclick=&q ...

  6. react事件绑定的三种常见方式以及解决Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state问题思路

    在 React 组件中,每个方法的上下文都会指向该组件的实例,即自动绑定 this 为当前组件. 而且 React 还会对这种引用进行缓存,以达到 CPU 和内存的优化.在使用 ES6 classes ...

  7. React事件绑定的方式

    一.是什么 在react应用中,事件名都是用小驼峰格式进行书写,例如onclick要改写成onClick 最简单的事件绑定如下: class ShowAlert extends React.Compo ...

  8. React/React Native的 ES5 ES6 写法对照

      ES5 ES6 模块 var React = require("react-native); var { Image, Text, View } = React;   import Re ...

  9. React事件绑定与解绑

    React中事件分类 React中事件绑定分为两种: 1.直接添加在React元素上的事件,这是React在基于Virtual DOM的基础上实现的符合w3c规范的合成事件(SyntheticEven ...

随机推荐

  1. Data Lake Analytics + OSS数据文件格式处理大全

    0. 前言 Data Lake Analytics是Serverless化的云上交互式查询分析服务.用户可以使用标准的SQL语句,对存储在OSS.TableStore上的数据无需移动,直接进行查询分析 ...

  2. 痞子衡嵌入式:第一本Git命令教程(0)- 索引

    大家好,我是痞子衡,是正经搞技术的痞子.本系列痞子衡给大家讲的是Git命令汇编,共12篇文章,循序渐进地介绍Git操作的完整过程. 在开始Git课程之前,需要先跟大家普及2个重要概念(四度空间.四种状 ...

  3. LeetCode矩阵题型

    以三角形遍历矩阵 ; i < matrix.size(); ++i) { ; j < matrix[i].size(); ++j) swap(matrix[i][j], matrix[j] ...

  4. 前端javascript如何阻止按下退格键页面回退 但 不阻止文本框使用退格键删除文本

    这段代码可以: document.onkeydown = function (e) { e.stopPropagation(); // 阻止事件冒泡传递 e.preventDefault(); // ...

  5. 限制TextBox只允许输入数字和字母

    设置TextBox控件属性 ImeMode=Disable ShortcutsEnabled=False VB.NET Private Sub TextBox1_KeyDown(sender As O ...

  6. bootstrap tooltips在 angularJS中的使用

    使用bootstrap自带的提示控件,省去了不少事情 <div class="s2" ng-init="InitTooltip()"> <in ...

  7. Java Calendar类使用总结

    平时在浏览一些网站时,有些网站会显示出当前时间,如现在是xx年xx月xx日 xx时xx分xx秒,在实际的开发过程中,也会涉及到日期和时间的计算,Java中提供了一个专门的类Calendar来处理日期与 ...

  8. 0422作业:基础(if,while)

    """ 1.题目:企业发放的奖金根据利润提成.利润(I)低于或等于10万元时,奖金可提10%: 利润高于10万元,低于20万元时,低于10万元的部分按10%提成,高于10 ...

  9. http协议、模块、express框架以及路由器、中间件和mysql模块

    一.http协议 是浏览器和web服务器之间的通信协议 1.通用头信息 request url:请求的url,向服务器请求的数据 request method:请求的方式   get.post sta ...

  10. VR一体机如何退出FFBM(QFIL)

    前文介绍了通过fastboot命令擦除misc分区,从而退出FFBM的方法.这个方法比较简便,但有不灵的时候,fastboot erase misc命令执行失败,如下图所示. erasing 'mis ...