zoukankan      html  css  js  c++  java
  • react---改变this指向

    1.行间定义事件后面使用bind绑定this

    使用bind来修改this的指向,需要注意的是bind括号内第一个参数是修改this的,后面可以设置其他参数进行传值。代码如下:

    run(){
    alert("第一种方法!")
    }
    
    <button onClick={this.run.bind(this)}>第一种</button>

    2.在构造函数内部声明this指向

    第二种方法和第一种方法原理一样,只是写的位置不同。代码如下:

    constructor(props) {
    super(props);
    this.state={
    //定义数据
    }
    this.run = this.run.bind(this);
    }
    
    run(){
    alert("第二种方法!")
    }
    
    <button onClick={this.run}>第二种</button>

    3.声明事件时将事件等于一个箭头函数

    将定义的run方法再等于一个箭头函数,利用箭头函数没有自己的this指针会继承外层的作用域这个特性,来解决this指向问题。代码如下:

    run=()=> {
    alert("第三种方法!")
    }
    
    <button onClick={this.run}>第三种</button>

    4.行间定义事件使用箭头函数

    第四种方法和第三种方法的原理是一样的,只是写法不同。代码如下:

    run(){
    alert("第四种方法!")
    }
    
    <button onClick={()=>this.run()>第四种</button>

    总的来说,改变this的指向问题可以通过使用bind来修改this的指向,还有可以使用箭头函数来解决。

  • 相关阅读:
    ubuntu18.04阿里源
    C# 去开头字符串
    思维导图 电商运营思路
    思维导图 淘宝淘宝流量来源
    学习 名词
    Java面试题之“==”和“equals()”方法的区别?
    修改本地MySQL的root身份密码
    添加并启动MySQL服务
    在centos7上进行hadoop-3.1.2的伪分布搭建
    TreeMap树映射取出对象的方式
  • 原文地址:https://www.cnblogs.com/ljygirl/p/13595026.html
Copyright © 2011-2022 走看看