详解三种方式在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下过滤数组重复值的代码
Sep 10 Javascript
javascript 支持ie和firefox杰奇翻页函数
Jul 22 Javascript
将Datatable转化成json发送前台实现思路
Sep 06 Javascript
javaScript中with函数用法实例分析
Jun 08 Javascript
Javascript 是你的高阶函数(高级应用)
Jun 15 Javascript
微信小程序之仿微信漂流瓶实例
Dec 09 Javascript
js实现自定义路由
Feb 04 Javascript
Ajax验证用户名或昵称是否已被注册
Apr 05 Javascript
关于vue中 $emit的用法详解
Apr 12 Javascript
微信小程序自定义tabBar的踩坑实践记录
Nov 06 Javascript
交互式可视化js库gojs使用介绍及技巧
Feb 18 Javascript
Vue监视数据的原理详解
Feb 24 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数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
PHP中Array相关函数简介
2016/07/03 PHP
php实现XML和数组的相互转化功能示例
2017/02/08 PHP
JavaScript Prototype对象
2009/01/07 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
jQuery父级以及同级元素查找介绍
2013/09/04 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
JS常用加密编码与算法实例总结
2016/12/22 Javascript
Angular下H5上传图片的方法(可多张上传)
2017/01/09 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
vue如何从接口请求数据
2017/06/22 Javascript
微信小程序视图控件与bindtap之间的问题的解决
2019/04/08 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
python3.3使用tkinter开发猜数字游戏示例
2014/03/14 Python
python实现每次处理一个字符的三种方法
2014/10/09 Python
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
python 连接各类主流数据库的实例代码
2018/01/30 Python
Flask入门之上传文件到服务器的方法示例
2018/07/18 Python
python 协程 gevent原理与用法分析
2019/11/22 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
CSS3 实现的加载动画
2020/12/07 HTML / CSS
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
美国运动鞋类和服装零售连锁店:Shoe Palace
2019/08/13 全球购物
大学四年个人自我小结
2014/03/05 职场文书
大学生实习证明范文(5篇)
2014/09/18 职场文书
台风停课通知
2015/04/24 职场文书
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL