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

在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

这是因为 在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作用域内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • React组件中的this的具体使用

    React组件的this是什么 通过编写一个简单组件,并渲染出来,分别打印出自定义函数和render中的this: import React from 'react'; const STR = '被调用,this指向:'; class App extends React.Component{ constructor(){ super() } //测试函数 handler() { console.log(`handler ${STR}`,this); } render(){ console.log

  • 深入理解React中es6创建组件this的方法

    首发于:https://mingjiezhang.github.io/. 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的demo说起 Facebook最近一次更新react时,将es6中的class加入了组件的创建方式当中.Facebook也推荐组件创建使用通过定义一个继承自 React.Component 的class来定义一个组件类.官方的demo: class LikeButton extends React.Component

  • React中this丢失的四种解决方法

    发现问题 我们在给一个dom元素绑定方法的时候,例如: <input type="text" ref="myinput" accept = "image/*" onChange = {this.selectFile} /> React组件中不能获取refs的值,页面报错提示:Uncaught TypeError: Cannot read property 'refs' of null or undefind 小栗子 import Re

  • 详解react关于事件绑定this的四种方式

    在react组件中,每个方法的上下文都会指向该组件的实例,即自动绑定this为当前组件,而且react还会对这种引用进行缓存,以达到cpu和内存的最大化.在使用了es6 class或者纯函数时,这种自动绑定就不复存在了,我们需要手动实现this的绑定 React事件绑定类似于DOM事件绑定,区别如下: 1.React事件的用驼峰法命名,DOM事件事件命名是小写 2.通过jsx,传递一个函数作为event handler,而不是一个字符串. 3.React事件不能通过返回false来阻止默认事件,

  • React.js绑定this的5种方法(小结)

    this在javascript中已经相当灵活,把它放到React中给我们的选择就更加困惑了.下面一起来看看React this的5种绑定方法. 1.使用React.createClass 如果你使用的是React 15及以下的版本,你可能使用过React.createClass函数来创建一个组件.你在里面创建的所有函数的this将会自动绑定到组件上. const App = React.createClass({ handleClick() { console.log('this > ', th

  • React 组件中的 bind(this)示例代码

    React 组件中处理 onClick 类似事件绑定的时候,是需要显式给处理器绑定上下文(context)的,这一度使代码变得冗余和难看. 请看如下的示例: class App extends Component { constructor() { super(); this.state = { isChecked: false }; } render() { return ( <div className="App"> <label > check me: &

  • react实现pure render时bind(this)隐患需注意!

    pure render 我就不多说了,附上我另一片文章链接 react如何性能达到最大化(前传) 不论你用不用immutable,只要你想达到pure render,下面值得你注意! 一天我和往常一样,开开心心得写着react,用着@pureRender, export default class extends Component { ... render() { const {name,age} =this.state; return ( <div> <Person name={na

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

    在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 &l

  • 详解三种方式解决vue中v-html元素中标签样式

    Vue为v-html中标签添加CSS样式 <template> <div class="hello"> <section> <h2 class="title">{{news.title}}</h2> <p class="news-time">{{news.datetime}}</p> <div class="con" v-html=&qu

  • 第七篇Bootstrap表单布局实例代码详解(三种表单布局)

    第七篇Bootstrap表单布局实例代码详解(三种表单布局)

    Bootstrap提供了三种表单布局:垂直表单,内联表单和水平表单.下面逐一给大家介绍,有兴趣的朋友一起学习吧. 创建垂直或基本表单: •·向父 <form> 元素添加 role="form". •·把标签和控件放在一个带有 class .form-group 的 <div> 中.这是获取最佳间距所必需的. •·向所有的文本元素 <input>.<textarea> 和 <select> 添加 class .form-cont

  • 详解五种方式让你在java中读取properties文件内容不再是难题

    详解五种方式让你在java中读取properties文件内容不再是难题

    一.背景 最近,在项目开发的过程中,遇到需要在properties文件中定义一些自定义的变量,以供java程序动态的读取,修改变量,不再需要修改代码的问题.就借此机会把Spring+SpringMVC+Mybatis整合开发的项目中通过java程序读取properties文件内容的方式进行了梳理和分析,先和大家共享. 二.项目环境介绍 Spring 4.2.6.RELEASE SpringMvc 4.2.6.RELEASE Mybatis 3.2.8 Maven 3.3.9 Jdk 1.7 Id

  • 详解三种java实现多线程的方式

    java中实现多线程的方法有两种:继承Thread类和实现runnable接口. 1.继承Thread类,重写父类run()方法 public class thread1 extends Thread { public void run() { for (int i = 0; i < 10000; i++) { System.out.println("我是线程"+this.getId()); } } public static void main(String[] args) {

  • javascript中类的定义方式详解(四种方式)

    本文实例讲述了javascript中类的定义方式.分享给大家供大家参考,具体如下: 类的定义包括四种方式: 1.工厂方式 function createCar(name,color,price){ var tempcar=new Object; tempcar.name=name; tempcar.color=color; tempcar.price=price; tempcar.getName=function(){ document.write(this.name+"-----"+

  • 详解三种C#实现数组反转方式

    今天上班中午吃饱之后.逛博客溜达看到一道题:数组反转  晚上回家洗完澡没事情做,就自己练习一把. public static class ArrayReserve { /// <summary> /// 使用 Array.Reverse(Arrar) 反转全部 /// </summary> /// <param name="arr"></param> public static void ReverseDemo1(int[] arr) {

  • MongoDB中优雅删除大量数据的三种方式

    MongoDB中优雅删除大量数据的三种方式

    目录 为什么要"瘦身"呢? MongoDB中删除数据的三种方式 三种方式的执行效率对比 1. remove 2. deleteMany 3. bulkWrite 通过 Write Concern 规避主从延迟 删除过程中遇到的Bug 总结 删除大量数据,无论是在哪种数据库中,都是一个普遍性的需求.除了正常的业务需求,我们需要通过这种方式来为数据库"瘦身". 为什么要"瘦身"呢? 1.表的数据量到达一定量级后,数据量越大,表的查询性能会越差. 毕竟

  • 详解React中共享组件逻辑的三种方式

    废话少说,这三种方式分别是:render props.高阶组件和自定义Hook.下面依次演示 假设有一个TimeOnPage组件专门用来记录用户在当前页面停留时间,像这样: const TimeOnPage = () => { const [second, setSecond] = useState(0); useEffect(() => { setTimeout(() => { setSecond(second + 1); }, 1000); }, [second]); return

  • 详解Shell脚本中调用另一个Shell脚本的三种方式

    主要以下有几种方式: Command Explanation fork 新开一个子 Shell 执行,子 Shell 可以从父 Shell 继承环境变量,但是子 Shell 中的环境变量不会带回给父 Shell. exec 在同一个 Shell 内执行,但是父脚本中 exec 行之后的内容就不会再执行了 source 在同一个 Shell 中执行,在被调用的脚本中声明的变量和环境变量, 都可以在主脚本中进行获取和使用,相当于合并两个脚本在执行. 第一种:fork 特点:会生成子PID而且可重复被

随机推荐