ES6中bind(this)用法说明

迷南。 2022-01-18 23:29 248阅读 0赞

在使用 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>
      )
    }

转自 [https://blog.csdn.net/u011215669/article/details/81020241][https_blog.csdn.net_u011215669_article_details_81020241]

[https_blog.csdn.net_u011215669_article_details_81020241]: https://blog.csdn.net/u011215669/article/details/81020241

发表评论取消回复

表情：

评论列表（有 0 条评论，248人围观）

还没有评论，来说两句吧...

相关阅读

相关 ES6 Promise用法小结

目录 1.什么是Promise？我们用Promise来解决什么问题？ 2.es6 promise用法大全 2.1、then 链式操作的用法 2. 2、reject的用

朴灿烈づ我的快乐病毒、/ 2024年04月03日 11:04/ 0 赞/ 78 阅读

相关 ES6中的continue用法详解

在ES6中，continue关键字用于在循环语句中跳过当前迭代并继续下一次迭代。它通常与for循环或while循环结合使用，以便在满足特定条件时跳过当前迭代。下面是使用ES

女爷i/ 2023年10月16日 11:00/ 0 赞/ 8 阅读

相关 ES6 Promise用法总结

1.什么是Promise Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch

女爷i/ 2023年08月17日 17:07/ 0 赞/ 160 阅读

相关 ES6 Promise用法总结

目录：一、Promise概述二、使用Promise的好处三、Promise基本用法四、基于Promise发送

偏执的太偏执、/ 2023年07月04日 04:40/ 0 赞/ 38 阅读

相关 ES6 Promise 用法讲解

Promise是一个构造函数，自己身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。那就new一个 va

旧城等待，/ 2022年10月01日 05:41/ 0 赞/ 179 阅读

相关 ES6——Day1（let用法）

1、基本用法 ES6新增了let命令，类似于javascript中的var命令注意：它所声明的变量，只是在let命令所在的代码块有效。 <!DOCTYPE HT

缺乏、安全感/ 2022年07月16日 17:12/ 0 赞/ 180 阅读

相关 ES6中bind(this)用法说明

在使用 React 中的 Class extends写法，如果 onClick 绑定一个方法就需要 bind(this)，如果使用React.createClass 方法就不需

迷南。/ 2022年01月18日 23:29/ 0 赞/ 249 阅读

相关 ES6 模板字符串用法详解

模板字符串使用 \`\` 反引号表示，需要使用变量时，通过 `${}` 插入变量。 ES5 中拼接字符串 var uname = "小倩", age = 19,

痛定思痛。/ 2021年12月05日 15:11/ 0 赞/ 307 阅读

相关 ES6 Promise 用法讲解

Promise是一个构造函数，自己身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。那就new一个 ![复制代码

一时失言乱红尘/ 2021年11月23日 06:08/ 0 赞/ 313 阅读

相关 Es6-promise用法小结

.什么是Promise Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等

╰半橙微兮°/ 2021年11月23日 03:38/ 0 赞/ 390 阅读