React组件中的函数绑定this的几种方式

Stella981
• 阅读 953

在React中使用class定义组件时如果不注意this的指向问题,会带来一些麻烦。

绑定this主要有下面两种方法:

1. bind()

在class中定义函数,然后在构造方法中使用bind()绑定当前的组件对象。

class MyComponent extends React.Component {
    constructor(props) {
        super(props) ;
        this.handleClick = this.handleClick.bind(this) ;
    }
    handleClick() {
        //...
    }
    render() {
        return (
            <div>
                <button onClick={this.handleClick}>点击</button>
            </div>
        )
    }
}

2. 箭头函数

箭头函数中的this指向定义函数定义时所在的执行环境。而不是运行时所在的环境。

class MyComponent extends React.Component {
    constructor(props) {
        super(props) ;

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

组件中,哪些函数需要绑定当前组件对象呢,主要有:

1. 事件处理函数

2. 作为自定义属性传入子组件的函数

class MyComponent extends React.Component {
    constructor(props) {
        super(props) ;

    }

    commentAdd = () => {
        //...
    }
    render() {
        return (
            <div>
                   <CommentList CommentAdd={this.commentAdd} />
            </div>
        )
    }
}

CommentList是一个子组件,从父组件中传入了一个函数作为这个子组件的自定义属性。

3. 异步操作的回调函数

class MyComponent extends React.Component {
    constructor(props) {
        super(props) ;
        this.state = {

            title: 'hello world'
        }

    }


    componentDidMount() {
        setTimeout((function() {
            this.setState({
                title: '你好,世界'
            })
        }).bind(this), 1000)
    }

    render() {
        return (
            <div>
                <h1>{this.state.title}</h1>
            </div>
        )
    }
}
ReactDOM.render(<MyComponent/>, document.querySelector('#app'))

setTimeout()的第一个参数是一个回调函数。此时这个回调函数需要绑定当前的组件对象,因为回调函数内需要组件的一些方法和属性。

总结

凡是组件内自定义的函数,都要绑定组件对象。而且最好使用箭头函数定义函数。这样函数内部的this直接指向当前的组件对象。

组件中不能使用立即执行的函数。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
3年前
JS 对象数组Array 根据对象object key的值排序sort,很风骚哦
有个js对象数组varary\{id:1,name:"b"},{id:2,name:"b"}\需求是根据name或者id的值来排序,这里有个风骚的函数函数定义:function keysrt(key,desc) {  return function(a,b){    return desc ? ~~(ak
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Stella981 Stella981
3年前
React(5)
绑定函数事件在以类继承的方式定义的组件中,为了能方便地调用当前组件的其他成员方法或属性(如:this.state),通常需要将事件处理函数运行时的this指向当前组件实例。run(){  alert('我是一个run方法')}<buttononClick{this.run}执行方法</button //方法
为什么mysql不推荐使用雪花ID作为主键
作者:毛辰飞背景在mysql中设计表的时候,mysql官方推荐不要使用uuid或者不连续不重复的雪花id(long形且唯一),而是推荐连续自增的主键id,官方的推荐是auto_increment,那么为什么不建议采用uuid,使用uuid究
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这