快捷導(dǎo)航

詳解三種方式在React中解決綁定this的作用域問(wèn)題并傳參

更新時(shí)間：2020年08月18日 11:19:42 作者：Piconjo_Official

這篇文章主要介紹了詳解三種方式在React中解決綁定this的作用域問(wèn)題并傳參，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

在React中時(shí)常會(huì)遇到this指向的作用域問(wèn)題從而導(dǎo)致undefined報(bào)錯(cuò)

先來(lái)個(gè)Demo：
功能很簡(jiǎn)單點(diǎn)擊按鈕改變文字

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"
    })
  }
}

但會(huì)遇到問(wèn)題：Cannot read property ‘setState' of undefined

這是因?yàn)?在changeMsg1方法內(nèi)部的this指向的并不是外面的組件因而根本就不會(huì)有setState()方法了自然會(huì)報(bào)錯(cuò)

為此有三種解決方法

方式一：在事件處理函數(shù)中使用.bind()

只要這樣即可：

render() { 
    return <div>
      <input type="button" value="Way1" onClick={this.changeMsg1.bind(this)}/>
      <hr/>
      <h3>{this.state.msg}</h3>
    </div>
  }

bind()的作用是為前面的函數(shù)修改函數(shù)內(nèi)部的this的指向從而使得函數(shù)內(nèi)部的this指向bind中的第一個(gè)參數(shù)

bind()還可以傳值：
bind第一個(gè)參數(shù)后面的所有參數(shù)都會(huì)作為調(diào)用bind前面的函數(shù)的參數(shù)傳遞

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() 它們都能改變函數(shù)內(nèi)部的this的指向
不過(guò)bind()和call()/apply()的區(qū)別是：bind()并不會(huì)立即調(diào)用而call()/apply()會(huì)立即調(diào)用

方式二：在構(gòu)造函數(shù)中使用.bind()

當(dāng)為一個(gè)函數(shù)調(diào)用bind 從而改變this的指向之后 bind函數(shù)的返回值是這個(gè)被改變this指向的函數(shù)的改變后的引用
bind并不會(huì)修改原函數(shù)的this的指向而是返回一個(gè)修改后的函數(shù)的指向因此需要重新接收方可生效

import React from 'react';

export default class BindWithThis extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      msg:"BindWithThis"
    }

    // 當(dāng)為一個(gè)函數(shù)調(diào)用bind 改變this的指向之后 bind函數(shù)的返回值是這個(gè)被改變this指向的函數(shù)的改變后的引用 因此需要重新接收
    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
    })
  }
}

方式三：使用箭頭函數(shù)

利用了箭頭函數(shù)的特性：箭頭函數(shù)內(nèi)部的this永遠(yuǎn)指向調(diào)用者方的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
  })
}

當(dāng)然更推薦使用更加方便的箭頭函數(shù)

到此這篇關(guān)于詳解三種方式在React中解決綁定this的作用域問(wèn)題并傳參的文章就介紹到這了,更多相關(guān)React綁定this作用域內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: