react之事件绑定（this、传参）

最新推荐文章于 2025-06-09 21:42:18 发布

原创最新推荐文章于 2025-06-09 21:42:18 发布 · 536 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

react 专栏收录该内容

11 篇文章

订阅专栏

本文探讨了在React中如何正确处理事件绑定函数中的this指向问题，提供了多种解决方案，包括使用箭头函数、bind方法，并介绍了如何在事件处理函数中传递参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、事件绑定函数中this

默认情况下，this指向undefined

import React from 'react'
export default class ThingBind extends React.Component{
    constructor(){
        super()
    }
    console(){
        console.log(this)//输出undefined
    }
    render(){
        return(
        <button onClick={this.console}>点击</button>
        )
    }
}

但实际开发中，我们需要事件函数中的this指向当前组件对象，有下面几种解决方案
第一种：声明函数时候使用箭头函数

import React from 'react'
export default class ThingBind extends React.Component{
    constructor(){
        super()
    }
    console=()=>{
        console.log(this)//输出ThingBing{...}
    }
    render(){
        return(
        <button onClick={this.console}>点击</button>
        )
    }
}

第二种：使用bing，在构造函数中绑定this或者直接在绑定事件时绑定this

import React from 'react'
export default class ThingBind extends React.Component{
    constructor(){
        super()
        this.console=this.console.bind(this)
    }
    console(){
        console.log(this)//输出ThingBing{...}
    }
    render(){
        return(
        <button onClick={this.console}>点击</button>
        // <button onClick={this.console.bind(this)}>点击</button>
        )
    }
}

二、传参

第一种：绑定事件时候使用箭头函数

import React from 'react'
export default class ThingBind extends React.Component{
    constructor(){
        super()
    }
    console(msg){
        console.log(msg)//我是参数
    }
    render(){
        return(
        <button onClick={()=>this.console('我是参数')}>点击</button>
        )
    }
}

第二种：/2.通过bind修改this并且传参

import React from 'react'
export default class ThingBind extends React.Component{
    constructor(){
        super()
    }
    console(msg){
        console.log(msg)//我是参数
    }
    render(){
        return(
        <button onClick={(this.console.bind(this,'我是参数'))}>点击</button>
        )
    }
}