React中綁定this并給函數(shù)傳參的三種方式

更新時間：2025年07月02日 08:56:26 作者：編程的一拳超人

React中定義一個組件,可以通過ES6版本以前的React.createClass或者ES6的class xxx extends React.Component,綁定this是react中非常重要的一部分,React中,綁定this的方式有多種,下面一一看看怎么進行this綁定并給函數(shù)傳參,需要的朋友可以參考下

前言

我們先來看下面這段代碼：

components/MyComponent.jsx

import React from "react";

export default class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      msg: "這是 MyComponent 組件 默認的msg"
    };
  }

  render() {
    return (
      <div>
        <h1>綁定This并傳參</h1>
        <input type="button" value="綁定this并傳參" onClick={this.changeMsg} />
        <h3>{this.state.msg}</h3>
      </div>
    );
  }

  changeMsg() {
    // 注意：這里的changeMsg()只是一個普通方法。因此，在觸發(fā)的時候，這里的 this 是 undefined
    console.log(this); // 打印結果：undefined
    this.setState({
      msg: "設置 msg 為新的值"
    });
  }
}

上面的代碼中，點擊按鈕，執(zhí)行 changeMsg() 方法，嘗試修改 this.state.msg 的值。但是，這個方法執(zhí)行的時候，是會報錯的：

Uncaught TypeError: Cannot read property 'setState' of null

而且，打印this的結果也是 undefined。這是為啥呢？因為這里的 this 并不是指向 MyComponent 組件本身。

那如何讓 changeMsg() 方法里面的 this，指向MyComponent 組件呢？辦法總是有的，比如說，將changeMsg() 修改為箭頭函數(shù)：

  changeMsg = () => {
    console.log(this); // 打印結果：MyComponent 組件
    this.setState({
      msg: "設置 msg 為新的值"
    });
  };

那么，除了箭頭函數(shù)可以綁定 this，還有沒有其他的方式呢？我們接下來講一講。

綁定 this 的方式一：bind()

代碼舉例：

import React from "react";

export default class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      msg: "這是 MyComponent 組件 默認的msg"
    };
  }

  render() {
    return (
      <div>
        <h1>綁定This并傳參</h1>
        {/* bind 的作用：為前面的函數(shù)，修改函數(shù)內(nèi)部的 this 指向。讓 函數(shù)內(nèi)部的this，指向 bind 參數(shù)列表中的 第一個參數(shù) */}
        <input
          type="button"
          value="綁定this并傳參"
          onClick={this.changeMsg1.bind(this)}
        />
        <h3>{this.state.msg}</h3>
      </div>
    );
  }

  changeMsg1() {
    this.setState({
      msg: "設置 msg 為新的值"
    });
  }
}

上方代碼中，我們?yōu)槭裁从?bind()，而不是用 call/apply 呢？因為 bind() 并不會立即調用，正是我們需要的。

注意：bind 中的第一個參數(shù)，是用來修改 this 指向的。第一個參數(shù)后面的所有參數(shù)，都將作為函數(shù)的參數(shù)傳遞進去。

我們來看看通過 bind() 是怎么傳參的。

通過 bind() 綁定this，并給函數(shù)傳參：

import React from "react";

export default class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      msg: "這是 MyComponent 組件 默認的msg"
    };
  }

  render() {
    return (
      <div>
        <h1>綁定This并傳參</h1>
        {/* bind 的作用：為前面的函數(shù)，修改函數(shù)內(nèi)部的 this 指向。讓 函數(shù)內(nèi)部的this，指向 bind 參數(shù)列表中的 第一個參數(shù) */}
        <input type="button" value="綁定this并傳參" onClick={this.changeMsg1.bind(this, "編程的一拳超人啊", "編程的一拳超人啊")} />
        <h3>{this.state.msg}</h3>
      </div>
    );
  }

  changeMsg1(arg1, arg2) {
    this.setState({
      msg: "設置 msg 為新的值" + arg1 + arg2
    });
  }
}

綁定 this 并給函數(shù)傳參的方式二：構造函數(shù)里設置 bind()

我們知道，構造函數(shù)中的 this 本身就是指向組件的實例的，所以，我們可以在這里做一些事情。

代碼舉例：

import React from "react";

export default class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      msg: "這是 MyComponent 組件 默認的msg"
    };

    // 綁定 this 并給函數(shù)傳參的方式2: 在構造函數(shù)中綁定并傳參
    // 注意：當一個函數(shù)調用 bind 改變了this指向后，bind 函數(shù)調用的結果，有一個【返回值】，這個值，就是被改變this指向后的函數(shù)的引用。
    // 也就是說： bind 不會修改 原函數(shù)的 this 指向，而是改變了 “函數(shù)拷貝”的this指向。
    this.changeMsg2 = this.changeMsg2.bind(this, "編程的一拳超人恩", "編程的一拳超人恩");
  }

  render() {
    return (
      <div>
        <h1>綁定This并傳參</h1>
        <input type="button" value="綁定this并傳參" onClick={this.changeMsg2} />
        <h3>{this.state.msg}</h3>
      </div>
    );
  }

  changeMsg2(arg1, arg2) {
    this.setState({
      msg: "設置 msg 為新的值" + arg1 + arg2
    });
  }
}

上方代碼中，需要注意的是：當一個函數(shù)調用 bind 改變了this指向后，bind 函數(shù)調用的結果，有一個【返回值】，這個值，就是被改變this指向后的函數(shù)的引用。也就是說： bind 不會修改原函數(shù)的 this 指向，而是改變了 “函數(shù)拷貝”的this指向。

綁定 this 并給函數(shù)傳參的方式三：箭頭函數(shù)【薦】

第三種方式用得最多。

代碼舉例：

import React from "react";

export default class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      msg: "這是 MyComponent 組件 默認的msg"
    };
  }

  render() {
    return (
      <div>
        <h1>綁定This并傳參</h1>
        <input
          type="button"
          value="綁定this并傳參"
          onClick={() => {
            this.changeMsg3("編程的一拳超人3", "編程的一拳超人3");
          }}
        />
        <h3>{this.state.msg}</h3>
      </div>
    );
  }

  changeMsg3 = (arg1, arg2) => {
    // console.log(this);
    // 注意：這里的方式，是一個普通方法，因此，在觸發(fā)的時候，這里的 this 是 undefined
    this.setState({
      msg: "綁定this并傳參的方式3：" + arg1 + arg2
    });
  };
}

到此這篇關于React中綁定this并給函數(shù)傳參的三種方式的文章就介紹到這了,更多相關React綁定this并傳參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: