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

小鱼儿 2023-07-04 06:08 26阅读 0赞

# 前言 #

React中，在使用函数的过程中可能会改变this的指向，导致不能正常获取到值的问题，所以React中有三种方式可以供我们使用，从而解决this的指向问题。

# 绑定this并传参的方式 #

## 方式一：在事件处理函数中，直接使用bind绑定this并传参 ##

`bind`的作用：为前面的函数，修改函数内部的`this`指向，让函数内部的`this`，指向`bind`参数列表中的第一个参数。`bind`中的第一个参数，是用来修改`this`指向的，第一个参数后面的所有参数，都会当做将来调用前面函数时候的参数传递进去。

<input type="button" value="绑定this并传参的方式" onClick={this.changeMsg.bind(this,'●','▅')} />

函数调用：

changeMsg(arg1,arg2) {
        this.setState({
            msg: '绑定this并传参的方式' + arg1 + arg2
        })
    }

## 方式二：在构造函数中绑定并传参 ##

<input type="button" value="绑定this并传参的方式" onClick={this.changeMsg} />

`constructor`中使用`bind`改变函数指向：

this.changeMsg = this.changeMsg.bind(this,'☺','☼')

注意：当为一个函数，调用`bind`改变了`this`指向后，`bind`函数调用的结果，有一个返回值，这个值，就是被改变`this`指向后的函数的引用，`bind`不会修改原函数的`this`指向，所以需要重新赋值。

函数调用：

changeMsg(arg1,arg2) {
        this.setState({
            msg: '绑定this并传参的方式2' + arg1 + arg2
        })
    }

## 方式三：箭头函数并且传递参数 ##

<input type="button" value="绑定this并传参的方式" onClick={() => {this.changeMsg('◆','★')}} />

函数调用：

changeMsg(arg1,arg2) {
        this.setState({
            msg: '绑定this并传参的方式2' + arg1 + arg2
        })
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，26人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS绑定事件三种方式

三种方式 1、在DOM中直接绑定 2、在JS代码中直接绑定 3、使用事件监听函数绑定事件一、在DOM中直接绑定也就是直接在html标签中通过 onXX

╰半橙微兮°/ 2023年07月22日 04:58/ 0 赞/ 32 阅读

相关 React中绑定this并传参的三种方式

前言 React中，在使用函数的过程中可能会改变this的指向，导致不能正常获取到值的问题，所以React中有三种方式可以供我们使用，从而解决this的指向问题。

小鱼儿/ 2023年07月04日 06:08/ 0 赞/ 27 阅读

相关 React中this值绑定和事件函数传参

Javascript中的`this`值总是能让很多初学者感到困惑，总的来说`this`值就是指向调用函数的那个对象。但是`call`, `apply`, `bind`方法和ES

向右看齐/ 2023年06月13日 06:02/ 0 赞/ 90 阅读

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

在React中时常会遇到this指向的作用域问题从而导致undefined报错先来个Demo：功能很简单点击按钮改变文字 import React fr

た入场券/ 2023年02月16日 12:12/ 0 赞/ 20 阅读

相关 this的5种绑定方式

1.默认绑定默认绑定一般发生在回调函数,函数直接调用; function test() { console.log(this)

雨点打透心脏的1/2处/ 2022年11月12日 05:22/ 0 赞/ 181 阅读

相关 vue中路由传参的三种方式

第一种，第三种方法页面刷新数据不会丢失; 第二种方法页面刷新数据会丢失; <table> <thead> <tr> <th style="width

男娘i/ 2022年08月29日 00:11/ 0 赞/ 270 阅读

相关 DOM绑定事件的三种方式

参考[事件绑定原理][Link 1] 1. 在DOM中绑定。在DOM中绑定有两种方式: 直接在html中onXxxx = "jsCode" 在html中on

旧城等待，/ 2022年05月25日 14:11/ 0 赞/ 255 阅读

相关 vue三种传参方式

<p @click="btn(id)"></p> 　　第一种：通过路由中的name属性来确定匹配的路由（实际开发中不推荐）　　子组件通过$route.name

迈不过友情╰/ 2021年12月15日 08:47/ 0 赞/ 463 阅读

相关 react方法传参的两种方式

1.使用bind import React, { Component } from 'react' class App extends Component{

ゞ浴缸里的玫瑰/ 2021年11月22日 05:50/ 0 赞/ 404 阅读

相关总结JavaScript中this绑定方式

this在默认的绑定非严格模式下指向window，严格模式下指向undefined，比如下面的函数foo在非严格模式下

小灰灰/ 2020年04月21日 05:56/ 0 赞/ 932 阅读