详解三种方式在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 相关文章推荐
ajax无刷新动态调用股票信息(改良版)
Nov 01 Javascript
通过JS 获取Mouse Position(鼠标坐标)的代码
Sep 21 Javascript
javascript贪吃蛇完整版(源码)
Dec 09 Javascript
JavaScript仿静态分页实现方法
Aug 04 Javascript
jQuery实现Tab菜单滚动切换的方法
Sep 21 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
javascript事件委托的用法及其好处简析
Apr 04 Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 Javascript
详解微信小程序轨迹回放实现及遇到的坑
Feb 02 Javascript
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
PHP中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
JavaScript打字小游戏代码
2011/12/26 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
2016/08/01 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
浅谈jquery设置和获得checkbox选中的问题
2016/08/19 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
2016/09/18 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
[02:12]打造更好的电竞完美世界:完美盛典回顾篇
2018/12/19 DOTA
python定时关机小脚本
2018/06/20 Python
Python3实现的回文数判断及罗马数字转整数算法示例
2019/03/27 Python
浅析Python面向对象编程
2020/07/10 Python
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
2016/12/22 HTML / CSS
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
荣耀商城:HIHONOR
2020/11/03 全球购物
请解释virtual关键字的含义
2015/06/17 面试题
介绍一下如何优化MySql
2016/12/20 面试题
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?
2014/07/27 面试题
医务工作者先进事迹材料
2014/01/26 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
公司员工培训管理制度
2015/08/04 职场文书
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python