笔记九、React组件的核心属性—事件处理（handleClick事件）

最新推荐文章于 2025-06-02 08:42:32 发布

原创最新推荐文章于 2025-06-02 08:42:32 发布 · 347 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #笔记 #javascript

React 专栏收录该内容

26 篇文章

订阅专栏

本文讲述了如何在React组件中正确处理事件绑定，特别是handleClick方法的使用，强调了在render()中调用时需要加上`this`，以及在构造函数中绑定this指向以确保state的正确更新。

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

事件的绑定和改变状态

handleClick 放在类 App 的原型对象上，供实例使用，在 render() 中调用时必须加 this。

import React from "react";

// 所有 React 组件必须像纯函数一样保护它的 props 不被更改
class App extends React.Component {

    // 点击更改 state
    constructor(props) {
        super(props);
        this.state = {isWash: false};
        // 软连接,改变 this 指向
        // 相当于 定义了一个新的函数变量,通过软连接,指向原型中的 handleClick,让 handleClick 和 App 的其他变量同级
        this.handleClick = this.handleClick.bind(this)
    }

    render() {
        // 打印指向 App 的对象
        // handleClick 方法本来是定义在 App 原型之上的,直接打印 handleClick 会找不到,要 this.handleClick
        console.log(this);
        return (
            <>
                <button onClick={this.handleClick} style={{color: "blueviolet"}}>
                    请点击
                </button>
                <div>
                    老王今天 {this.state.isWash ? "去" : "没去"} 洗脚了
                </div>
            </>
        )
    };

    handleClick() {
        // console.log('点击了');
        // 此时 this 为 undefined
        console.log('handleClick->this', this);
        // 修改 state 的唯一方法
        this.setState({isWash: !this.state.isWash})
    }
}

export default App

改变构造函数中的状态state

this.handleClick = this.handleClick.bind(this)

handleClick 要访问构造器的 state 就必须要改变 this 指向实例

handleClick 并不是通过实例调用的
类中的方法默认都开启了局部的严格模式，所以 handleClick this 为 undefined

类似：
const a = new App();
const r = a.click;
r();