关于react绑定事件中的this

最新推荐文章于 2025-07-17 20:00:00 发布

原创最新推荐文章于 2025-07-17 20:00:00 发布 · 3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #react传递参数 #react绑定this #react阻止默认事件

前端专栏收录该内容

28 篇文章

订阅专栏

本文详细介绍了在React中处理事件时遇到的this指向问题及解决方案，包括如何正确绑定this以确保能够访问到组件实例，同时介绍了如何传递额外参数并保持事件默认行为。

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

关于react事件中的this指针问题：

如果我们在react时间中，如果不绑定this，那么方法执行的时候是找不到this的：

比如下面的情况：

import React from 'react'
import Logo from '../../component/logo/logo'
import {List,InputItem,WingBlank,WhiteSpace,Button} from 'antd-mobile'

class Login extends React.Component{
    constructor(props){
        super(props)
    }

    register(){
        this.props.history.push('/register')
    }
    render (){
        return (
            <div>
                <Logo/>
                <h2>登录页</h2>
                <WingBlank>
                    <Button type="primary">登录</Button>
                    <WhiteSpace/>
                    <Button onClick={this.register} type="primary">注册</Button>
                </WingBlank>
            </div>
        )
    }
}

export default Login;

这里面的执行会直接报错，因为找不到this。

解决办法：

<Button onClick={this.register.bind(this)} type="primary">注册</Button>

这个时候，在执行上面的函数，我们就可以找得到this了。

关于传参和原生event参数的问题，可以这么写

<Button onClick={this.register.bind(this,name)} type="primary">注册</Button>

方法函数如下：

    register(name,event){
        console.log(name);
        event.preventdefault();
        console.log(this.state.data);
    }

这样来写，可以获取到传参，也可以拿到this，也可以拿到事件的默认参数。我们在申明时间的时候，可以不绑定event，但是一定要绑定this，而且还是第一个参数就要绑定this，传参紧跟其后面。