详解三种方式在React中解决绑定this的作用域问题并传参


Posted in Javascript onAugust 18, 2020

在React中时常会遇到this指向的作用域问题 从而导致undefined报错

先来个Demo:
功能很简单 点击按钮改变文字

import React from 'react';

export default class BindWithThis extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      msg:"BindWithThis"
    }
  }

  render() { 
    return <div>
      <input type="button" value="Way1" onClick={this.changeMsg1}/>
      <hr/>
      <h3>{this.state.msg}</h3>
    </div>
  }

  changeMsg1(){
    console.log(this)
    this.setState({
      msg:"Way1"
    })
  }
}

但会遇到问题:Cannot read property ‘setState' of undefined

详解三种方式在React中解决绑定this的作用域问题并传参

这是因为 在changeMsg1方法内部的this指向的并不是外面的组件 因而根本就不会有setState()方法了 自然会报错

为此 有三种解决方法

方式一:在事件处理函数中使用.bind()

只要这样即可:

render() { 
    return <div>
      <input type="button" value="Way1" onClick={this.changeMsg1.bind(this)}/>
      <hr/>
      <h3>{this.state.msg}</h3>
    </div>
  }

bind()的作用是为前面的函数修改函数内部的this的指向 从而使得函数内部的this指向bind中的第一个参数

bind()还可以传值:
bind第一个参数后面的所有参数都会作为调用bind前面的函数的参数传递

render() { 
  return <div>
    <input type="button" value="Way1" onClick={this.changeMsg1.bind(this,"壹","贰")}/>
    <hr/>
    <h3>{this.state.msg}</h3>
  </div>
}

changeMsg1(arg1,arg2){
  this.setState({
    msg:"Way1"+arg1+arg2
  })
}

除了bind()之外 还有call()和apply() 它们都能改变函数内部的this的指向
不过bind()和call()/apply()的区别是:bind()并不会立即调用 而call()/apply()会立即调用

方式二:在构造函数中使用.bind()

当为一个函数调用bind 从而改变this的指向之后 bind函数的返回值是这个被改变this指向的函数的改变后的引用
bind并不会修改原函数的this的指向 而是返回一个修改后的函数的指向 因此需要重新接收方可生效

import React from 'react';

export default class BindWithThis extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      msg:"BindWithThis"
    }

    // 当为一个函数调用bind 改变this的指向之后 bind函数的返回值是这个被改变this指向的函数的改变后的引用 因此需要重新接收
    this.changeMsg2 = this.changeMsg2.bind(this,"壹","贰")
  }

  render() { 
    return <div>
      <input type="button" value="Way2" onClick={this.changeMsg2}/>
      <hr/>
      <h3>{this.state.msg}</h3>
    </div>
  }

  changeMsg2(arg1,arg2){
    this.setState({
      msg:"Way2"+arg1+arg2
    })
  }
}

方式三:使用箭头函数

利用了箭头函数的特性:箭头函数内部的this永远指向调用者方的this

render() { 
  return <div>
    <input type="button" value="Way3" onClick={() => {this.changeMsg3("壹","贰")}}/>
    <hr/>
    <h3>{this.state.msg}</h3>
  </div>
}

changeMsg3 = (arg1,arg2) => {
  this.setState({
    msg:"Way3"+arg1+arg2
  })
}

当然 更推荐使用更加方便的箭头函数

到此这篇关于详解三种方式在React中解决绑定this的作用域问题并传参的文章就介绍到这了,更多相关React绑定this作用域内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
Aug 04 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
很酷的星级评分系统原生JS实现
Aug 25 Javascript
第一个Vue插件从封装到发布
Nov 22 Javascript
vue init失败简单解决方法(终极版)
Dec 22 Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 Javascript
vue2.0 实现富文本编辑器功能
May 26 Javascript
解析JS在获取当前月的最后一天遇到的坑
Aug 30 Javascript
微信小程序 冒泡事件原理解析
Sep 27 Javascript
vue+Element-ui实现登录注册表单
Nov 17 Javascript
vue+spring boot实现校验码功能
May 27 Vue.js
javascript实现移动端上传图片功能
Aug 18 #Javascript
八种Vue组件间通讯方式合集(推荐)
Aug 18 #Javascript
小程序实现上传视频功能
Aug 18 #Javascript
如何在selenium中使用js实现定位
Aug 18 #Javascript
vue实现移动端input上传视频、音频
Aug 18 #Javascript
React冒泡和阻止冒泡的应用详解
Aug 18 #Javascript
JavaScript数组排序的六种常见算法总结
Aug 18 #Javascript
You might like
Zend的Registry机制的使用说明
2013/05/02 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
zend framework重定向方法小结
2016/05/28 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
Jquery ui css framework
2010/06/28 Javascript
jquery实现对联广告的方法
2015/02/05 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
深入理解Javascript中的自执行匿名函数
2016/06/03 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
js使用Promise实现简单的Ajax缓存
2018/11/14 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
在vue中实现echarts随窗体变化
2020/07/27 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
简单的通用表达式求10乘阶示例
2014/03/03 Python
Python多进程机制实例详解
2015/07/02 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
Python中的整除和取模实例
2020/06/03 Python
.img/.hdr格式转.nii格式的操作
2020/07/01 Python
Python3爬虫里关于Splash负载均衡配置详解
2020/07/10 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
英国山地公路自行车商店:Tweeks Cycles
2018/03/16 全球购物
简单介绍Object类的功能、常用方法
2013/10/02 面试题
机关门卫岗位职责
2013/12/30 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书
医院领导班子整改方案
2014/10/01 职场文书
毕业典礼主持词
2015/06/29 职场文书
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS
Vue实现动态查询规则生成组件
2021/05/27 Vue.js
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android