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

小鱼儿 2023-07-04 06:08 117阅读 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 条评论，117人围观）

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

相关阅读

相关 React基础-JSX事件绑定-事件传参

文章目录 React的事件绑定 JSX事件绑定 JSX事件传参 JSX事件小案例练习 React的

浅浅的花香味﹌/ 2023年10月02日 20:49/ 0 赞/ 93 阅读

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

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

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

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

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

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

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

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

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

相关 React_react中this的指向绑定

1.bind方式原地绑定 class Maa extends React.Component{ fun(){ console.log(t

雨点打透心脏的1/2处/ 2023年02月13日 03:42/ 0 赞/ 28 阅读

相关 JS函数中的this的四种绑定方式

文章目录 1. this的默认绑定window 2. this的隐式绑定 3. this的显示绑定（使用call 和 bind）

太过爱你忘了你带给我的痛/ 2023年02月08日 12:50/ 0 赞/ 20 阅读

相关 this的5种绑定方式

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

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

相关 vue三种传参方式

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

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

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

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

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

相关总结JavaScript中this绑定方式

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

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