详解三种方式在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图片的展开和收缩实现代码
Apr 16 Javascript
js点击更换背景颜色或图片的实例代码
Jun 25 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
js 判断各种数据类型的简单方法(推荐)
Aug 29 Javascript
javascript函数中的3个高级技巧
Sep 22 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 Javascript
easyui messager alert 三秒后自动关闭提示的实例
Nov 07 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 Javascript
基于JavaScript实现表格滚动分页
Nov 22 Javascript
Vue.extend 登录注册模态框的实现
Dec 29 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 中文字符入库或显示乱码问题的解决方法
2010/04/12 PHP
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
PHP管理依赖(dependency)关系工具 Composer 安装与使用
2014/08/18 PHP
PHP+APACHE实现网址伪静态
2015/02/22 PHP
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
windows下apache搭建php开发环境
2015/08/27 PHP
php发送http请求的常用方法分析
2016/11/08 PHP
在线编辑器的实现原理(兼容IE和FireFox)
2007/03/09 Javascript
javascript 设计模式之单体模式 面向对象学习基础
2010/04/18 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
js对象关系图 方便dom操作
2012/03/18 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
ie浏览器使用js导出网页到excel并打印
2014/03/11 Javascript
浅谈javascript中自定义模版
2015/01/29 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
JavaScript获取当前cpu使用率的方法
2015/12/15 Javascript
javascript实现随机生成DIV背景色
2016/06/20 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
Vue-Router模式和钩子的用法
2018/02/28 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
Python中的异常处理简明介绍
2015/04/13 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
Python基于OpenCV实现人脸检测并保存
2019/07/23 Python
python实现多进程按序号批量修改文件名的方法示例
2019/12/30 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
利用django创建一个简易的博客网站的示例
2020/09/29 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
人力资源部门的主要职能
2014/02/22 职场文书
通用自荐信范文
2014/03/14 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书