React添加点击事件、改变this指向

最新推荐文章于 2024-10-21 13:59:26 发布

Magic_小小阿昕

最新推荐文章于 2024-10-21 13:59:26 发布

阅读量406

点赞数

分类专栏： React 文章标签： React添加点击事件、改变this指向

本文链接：https://blog.youkuaiyun.com/Amo__/article/details/101553512

版权

React 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了在React组件中添加点击事件监听器的三种方法，并探讨了如何在事件处理函数中正确设置`this`指向，确保能够访问到组件的实例方法和状态。

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

方法1

import React, { Component } from 'react'

class ClickComponent extends Component {
    constructor(props){
        super(props)
        this.state ={
            msg: '这是一个标题'
        }
    }
    run() {
        alert(this.state.msg)
    }
    render() {
        return (
        <div>
            <button onClick={this.run.bind(this)}>请点击</button>
        </div>
        )
    }
}

export default ClickComponent

方法2

import React, { Component } from 'react'
class ClickComponent extends Component {
    constructor(props){
        super(props)
        this.state ={
            msg: '这是一个标题23'
        }
        this.getClick = this.getClick.bind(this);
    }
    getClick() {
        alert(this.state.msg)
    }
    render() {
        return (
        <div>
            <button onClick={this.getClick}>请点击</button>
        </div>
        )
    }
}

export default ClickComponent

方法3

import React, { Component } from 'react'
class ClickComponent extends Component {
    constructor(props){
        super(props)
        this.state ={
            msg: '这是一个标题233'
        }
    }
    getClick=()=>{
        alert(this.state.msg)
    }
    render() {
        return (
        <div>
            <button onClick={this.getClick}>请点击</button>

        </div>
        )
    }
}

export default ClickComponent