专栏首页Node.js开发React组件绑定this的四种方式

React组件绑定this的四种方式

用react进行开发组件时,我们需要关注一下组件内部方法this的指向,react定义组件的方式有两种,一种为函数组件,一种为类组件,类组件内部可以定义一些方法,这些方法的this需要绑定到组件实例上,小编这里总结了一下,一共有四种方案:

第一种方案,在构造函数内部使用bind绑定this,这样做的好处是,避免每次渲染时都要重新绑定,代码如下:

import React, {Component} from 'react'

class Test extends React.Component {
    constructor (props) {
        super(props)
        this.state = {message: 'Allo!'}
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick (e) {
        console.log(this.state.message)
    }

    render () {
        return (
            <div>
                <button onClick={ this.handleClick }>Say Hello</button>
            </div>
        )
    }
}

第二种方案同样是用bind,但是这次不再构造函数内部使用,而是在render函数内绑定,但是这样的话,每次渲染都需要重新绑定,代码如下:

import React, {Component} from 'react'

class Test extends React.Component {
    constructor (props) {
        super(props)
        this.state = {message: 'Allo!'}
    }

    handleClick (name, e) {
        console.log(this.state.message + name)
    }

    render () {
        return (
            <div>
                <button onClick={ this.handleClick.bind(this, '赵四') }>Say Hello</button>
            </div>
        )
    }
}

第三种方案是在render函数中,调用方法的位置包裹一层箭头函数,因为箭头函数的this指向箭头函数定义的时候其所处作用域的this,而箭头函数在render函数中定义,render函数this始终指向组件实例,所以箭头函数的this也指向组件实例,代码如下:

class Test extends React.Component {
    constructor (props) {
        super(props)
        this.state = {message: 'Allo!'}
    }

    handleClick (e) {
        console.log(this.state.message)
    }

    render () {
        return (
            <div>
                <button onClick={ ()=>{ this.handleClick() } }>Say Hello</button>
            </div>
        )
    }

以上这种方式有个小问题,因为箭头函数总是匿名的,如果你打算移除监听事件,是做不到的,那么怎么做才可以移除呢?看下一种方案。

第四种方案,代码如下:

class Test extends React.Component {
    constructor (props) {
        super(props)
        this.state = {message: 'Allo!'}
    }
 
    handleClick = (e) => {
        console.log(this.state.message)
    }
 
    render () {
        return (
            <div>
                <button onClick={ this.handleClick }>Say Hello</button>
            </div>
        )
    }
}

不过,在Classes中直接赋值是ES7的写法,ES6并不支持,你有两种选择,一种是配置你的开发环境支持ES7,一种使采用如下方式,下面这种方式是第四种方案的另外一种写法,代码如下:

class Test extends React.Component {
    constructor (props) {
        super(props)
        this.state = {message: 'Allo!'}
        this.handleClick = (e) => {
            console.log(this.state.message)
        }
    }
 
    render () {
        return (
            <div>
                <button onClick={ this.handleClick }>Say Hello</button>
            </div>
        )
    }

以上便是react组件内部方法this绑定的四种方案,如果还有其它方案欢迎留言。

本文分享自微信公众号 - nodejs全栈开发(geekclass),作者:挥刀北上

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-03-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue使用watch 观察路由变化,重新获取内容

    在用Vue开发的过程中总会遇到这样或者那样的坑。vue的路由发生变化分两种情况,一种是pathname变化(或是hash变化),第二种是参数变化,第一种发生变化...

    挥刀北上
  • call、apply和bind的区别

    call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。

    挥刀北上
  • vue中表单双向绑定,怎么高效清空?

    在不使用vue框架的情况下,清空表单很容易,直接操作dom即可,但是使用了vue,将表单中的数据与vue实例中的data绑定,操作表单后清空表单似乎没那么好理解...

    挥刀北上
  • ASP.NET AJAX(14)__UpdatePanel与服务器端脚本控件脚本控件的作用脚本控件的指责Extender模型脚本控件和Extender模型在PostBack中保持状态在UpdatePa

    脚本控件的作用 ASP.NET AJAX的脚本控件,连接了服务器端和客户端,因为我们(可以)只在服务器端编程,而效果产生在客户端,这就需要我们首先在服务器端编写...

    小白哥哥
  • React组件方法中为什么要绑定this

    上例仅仅是一个组件类的定义,当在其他组件中调用或是使用ReactDOM.render( )方法将其渲染到界面上时会生成一个组件的实例,因为组件是可以复用的,面向...

    大史不说话
  • 在 Cocos Creator 里画个炫酷的雷达图

    是以从同一点开始的轴上表示的三个或更多个定量变量的二维图表的形式显示多元数据的图形方法。

    陈皮皮
  • Openlayers2卷帘功能的实现

    在WebGIS开发中,经常会有用户提需求,要实现卷帘功能,卷帘功能主要是实现两张图之间的对比。在前文中,讲到了openlayers3以及Arcgis for j...

    lzugis
  • three.js 郭先生制作太阳系

    今天郭先生收到评论,想要之前制作太阳系的案例,因为找不到了,于是在vue版本又制作一版太阳系,在线案例请点击three.js制作太阳系(加载时间比较长,请稍等一...

    郭先生的博客
  • c++ this *this

    在一个类里每个成员函数都有一个this指针。this指针指向调用对象。如果方法需要引用整个调用 对象可以使用*this。this是对象的地址,而不是对象本身。 ...

    lpxxn
  • flutter单引擎方案

    假设有两个模块,FlutterA,FlutterB,我们利用io.flutter.embedding.android.FlutterFragment下面的接入方...

    brzhang

扫码关注云+社区

领取腾讯云代金券