React中绑定this并给函数传参的三种方式

更新时间：2025年07月02日 08:56:26 作者：编程的一拳超人

React中定义一个组件,可以通过ES6版本以前的React.createClass或者ES6的class xxx extends React.Component,绑定this是react中非常重要的一部分,React中,绑定this的方式有多种,下面一一看看怎么进行this绑定并给函数传参,需要的朋友可以参考下

前言

我们先来看下面这段代码：

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()只是一个普通方法。因此，在触发的时候，这里的 this 是 undefined
    console.log(this); // 打印结果：undefined
    this.setState({
      msg: "设置 msg 为新的值"
    });
  }
}

上面的代码中，点击按钮，执行 changeMsg() 方法，尝试修改 this.state.msg 的值。但是，这个方法执行的时候，是会报错的：

Uncaught TypeError: Cannot read property 'setState' of null

而且，打印this的结果也是 undefined。这是为啥呢？因为这里的 this 并不是指向 MyComponent 组件本身。

那如何让 changeMsg() 方法里面的 this，指向MyComponent 组件呢？办法总是有的，比如说，将changeMsg() 修改为箭头函数：

  changeMsg = () => {
    console.log(this); // 打印结果：MyComponent 组件
    this.setState({
      msg: "设置 msg 为新的值"
    });
  };

那么，除了箭头函数可以绑定 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 的作用：为前面的函数，修改函数内部的 this 指向。让 函数内部的this，指向 bind 参数列表中的 第一个参数 */}
        <input
          type="button"
          value="绑定this并传参"
          onClick={this.changeMsg1.bind(this)}
        />
        <h3>{this.state.msg}</h3>
      </div>
    );
  }

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

上方代码中，我们为什么用 bind()，而不是用 call/apply 呢？因为 bind() 并不会立即调用，正是我们需要的。

注意：bind 中的第一个参数，是用来修改 this 指向的。第一个参数后面的所有参数，都将作为函数的参数传递进去。

我们来看看通过 bind() 是怎么传参的。

通过 bind() 绑定this，并给函数传参：

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 的作用：为前面的函数，修改函数内部的 this 指向。让 函数内部的this，指向 bind 参数列表中的 第一个参数 */}
        <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 并给函数传参的方式二：构造函数里设置 bind()

我们知道，构造函数中的 this 本身就是指向组件的实例的，所以，我们可以在这里做一些事情。

代码举例：

import React from "react";

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

    this.state = {
      msg: "这是 MyComponent 组件 默认的msg"
    };

    // 绑定 this 并给函数传参的方式2: 在构造函数中绑定并传参
    // 注意：当一个函数调用 bind 改变了this指向后，bind 函数调用的结果，有一个【返回值】，这个值，就是被改变this指向后的函数的引用。
    // 也就是说： bind 不会修改 原函数的 this 指向，而是改变了 “函数拷贝”的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
    });
  }
}

上方代码中，需要注意的是：当一个函数调用 bind 改变了this指向后，bind 函数调用的结果，有一个【返回值】，这个值，就是被改变this指向后的函数的引用。也就是说： bind 不会修改原函数的 this 指向，而是改变了 “函数拷贝”的this指向。

绑定 this 并给函数传参的方式三：箭头函数【荐】

第三种方式用得最多。

代码举例：

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);
    // 注意：这里的方式，是一个普通方法，因此，在触发的时候，这里的 this 是 undefined
    this.setState({
      msg: "绑定this并传参的方式3：" + arg1 + arg2
    });
  };
}

到此这篇关于React中绑定this并给函数传参的三种方式的文章就介绍到这了,更多相关React绑定this并传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

通过实例学习React中事件节流防抖
这篇文章主要介绍了通过实例学习React中事件节流防抖，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下
2019-06-06
React前端实现将Word(Doc/Docx)转HTML
随着在线内容生产需求的持续增长,转换Word文档到HTML格式已成为核心需求之一,本文将从环境配置、核心逻辑实现、导出参数定制三个维度详细介绍React的实现方案,希望对大家有所帮助
2025-11-11
React 条件判断实例详解
在 React 中,可以通过 JavaScript 的条件语句来动态渲染组件或元素,下面给大家分享几种常用的在 React 中处理条件渲染的方法,感兴趣的朋友跟随小编一起看看吧
2024-08-08
React类组件和函数组件对比-Hooks的简介
Hook 是 React 16.8 的新增特性，它可以让我们在不编写class的情况下, 使用state以及其他的React特性(比如生命周期，这篇文章主要介绍了React类组件和函数组件对比-Hooks的介绍及初体验,需要的朋友可以参考下
2022-11-11
React父组件数据实时更新了,子组件没有更新的问题
这篇文章主要介绍了React父组件数据实时更新了,子组件没有更新的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
Electron+React应用打包全流程
本文主要介绍了Electron+React应用打包全流程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-01-01
教你在react中创建自定义hooks
简单来说就是使用自定义hook可以将某些组件逻辑提取到可重用的函数中。自定义hook是一个从use开始的调用其他hook的Javascript函数，下面看下react中创建自定义hooks的相关知识，感兴趣的朋友一起看看吧
2021-11-11
React+valtio响应式状态管理
Valtio是一个很轻量级的响应式状态管理库,使用外部状态代理去驱动React视图来更新,本文主要介绍了React+valtio响应式状态管理,感兴趣的可以了解一下
2023-12-12
create-react-app安装出错问题解决方法
这篇文章主要介绍了create-react-app安装出错问题解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
React组件三大属性之state,props,refs
这篇文章主要介绍了React组件三大属性之state,props,refs,文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-07-07