在React中綁定this作用域并傳參的解決方法

發(fā)布時間：2020-08-19 10:09:33 來源：億速云閱讀：313 作者：小新欄目：開發(fā)技術

這篇文章給大家分享的是有關在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/>
      <h4>{this.state.msg}</h4>
    </div>
  }

  changeMsg1(){
    console.log(this)
    this.setState({
      msg:"Way1"
    })
  }
}

但會遇到問題：Cannot read property ‘setState' of undefined

在React中綁定this作用域并傳參的解決方法

這是因為在changeMsg1方法內部的this指向的并不是外面的組件因而根本就不會有setState()方法了自然會報錯

為此有三種解決方法

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

只要這樣即可：

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

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

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

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

changeMsg1(arg1,arg2){
  this.setState({
    msg:"Way1"+arg1+arg2
  })
}

除了bind()之外還有call()和apply() 它們都能改變函數(shù)內部的this的指向
不過bind()和call()/apply()的區(qū)別是：bind()并不會立即調用而call()/apply()會立即調用

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

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

import React from 'react';

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

    // 當為一個函數(shù)調用bind 改變this的指向之后 bind函數(shù)的返回值是這個被改變this指向的函數(shù)的改變后的引用 因此需要重新接收
    this.changeMsg2 = this.changeMsg2.bind(this,"壹","貳")
  }

  render() { 
    return <div>
      <input type="button" value="Way2" onClick={this.changeMsg2}/>
      <hr/>
      <h4>{this.state.msg}</h4>
    </div>
  }

  changeMsg2(arg1,arg2){
    this.setState({
      msg:"Way2"+arg1+arg2
    })
  }
}

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

利用了箭頭函數(shù)的特性：箭頭函數(shù)內部的this永遠指向調用者方的this

render() { 
  return <div>
    <input type="button" value="Way3" onClick={() => {this.changeMsg3("壹","貳")}}/>
    <hr/>
    <h4>{this.state.msg}</h4>
  </div>
}

changeMsg3 = (arg1,arg2) => {
  this.setState({
    msg:"Way3"+arg1+arg2
  })
}

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

感謝各位的閱讀！關于在React中綁定this作用域并傳參的解決方法就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細節(jié)

在React中綁定this作用域并傳參的解決方法

猜你喜歡

最新資訊

相關推薦

相關標簽