详解三种方式在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 相关文章推荐
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
jQuery使用技巧简单汇总
Apr 18 Javascript
简单实用的全选反选按钮例子
Oct 18 Javascript
JS小功能(button选择颜色)简单实例
Nov 29 Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
vue-router 导航钩子的具体使用方法
Aug 31 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
让axios发送表单请求形式的键值对post数据的实例
Aug 11 Javascript
Angularjs实现数组随机排序的方法
Oct 02 Javascript
Vue.js 中的 v-show 指令及用法详解
Nov 19 Javascript
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 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
PHP中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
浅析memcache启动以及telnet命令详解
2013/06/28 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
laravel框架的安装与路由实例分析
2019/10/11 PHP
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
Node.js Express 框架 POST方法详解
2017/01/23 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
JavaScript数组_动力节点Java学院整理
2017/06/26 Javascript
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
使用veloticy-ui生成文字动画效果
2018/02/08 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
vue中动态select的使用方法示例
2019/10/28 Javascript
vue 实现tab切换保持数据状态
2020/07/21 Javascript
解决vue刷新页面以后丢失store的数据问题
2020/08/11 Javascript
python 简易计算器程序,代码就几行
2009/08/29 Python
python基础_文件操作实现全文或单行替换的方法
2017/09/04 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
AHAVA美国官方网站:死海海泥护肤品牌
2016/10/18 全球购物
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
Mytheresa中国官网:德国时尚奢侈品商城
2017/08/04 全球购物
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
爱牙日活动总结
2014/08/29 职场文书
小学班主任心得体会
2016/01/07 职场文书
Django框架之路由用法
2022/06/10 Python