美文网首页
react的bind(this)

react的bind(this)

作者: SherrinfordL | 来源:发表于2019-07-05 17:34 被阅读0次

在调用this.setState()的时候出现了this为undefined的情况,如何处理。(四种写法,其中一种ES6的写法,无需bind的写法,用箭头函数)

第一种:在ES6中可以在构造函数中,直接将当前组件(或者叫类)的实例与函数绑定。

如this.handleClick = this.handleClick.bind(this);

第二种:在方法编写结尾的时候绑定this,bind(this),如下图。

第三种:在方法调用的时候绑定this,如onClick={this.handleClick.bind(this)}。

image

第四种:箭头函数,ES6中的写法,分为两种有参和无参数。直接上代码。

image

调用的时候的写法:

image

相关文章

  • React .bind()

    当使用es5时,是不需要用.bind()的。当使用es5 时,React会自动帮助我们给每一个function绑定...

  • react bind

    前置知识 原因:在temp作为中间量转换的时候丢失了this的指向 在react中 bind的原理同上方一致,在j...

  • react的bind

    问题描述 今天重构项目的路由代码,遇到了一个问题,在app.js 的文件中,我使用react-router路由如下...

  • react的bind(this)

    在调用this.setState()的时候出现了this为undefined的情况,如何处理。(四种写法,其中一种...

  • react性能优化 不要再component的props中使用箭头函数或者bind,因为每次使用箭头函数和bind...

  • React bind this的五种方式介绍

    react中避免不了经常需要对this进行操作,而事件默认react是不被bind到当前react实例上的,需要手...

  • React中的bind(this)

    为什么在React中有时需要通过bind()绑定this?类似如下: 原因是:在setInterval()中定义的...

  • react中的bind(this)

    在调用this.setState()的时候出现了this为undefined的情况,如何处理。(四种写法,自己想到...

  • react系列-bind this

    原文链接:https://segmentfault.com/a/1190000007207233对于大多数前端开发...

  • React系列bind this

    在实际开发中遇到事件不执行的情况,一直不理解bind函数,正好理理,代码如下 this.handleClick中t...

网友评论

      本文标题:react的bind(this)

      本文链接:https://www.haomeiwen.com/subject/cyaehctx.html