react入门—06react属性（state）

最新推荐文章于 2025-06-14 10:59:29 发布

原创最新推荐文章于 2025-06-14 10:59:29 发布 · 185 阅读

0 ·

CC 4.0 BY-SA版权

React入门专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一个基于React的点赞按钮组件的实现过程，包括组件挂载、状态管理及事件响应。通过使用类组件和setState方法，实现了点击按钮后点赞数的递增，并探讨了箭头函数在保持this上下文中的作用。

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

1.简介

2.实例

首先将这个组件挂载到App.js上面

LiksButton.js内容为

import React from 'react'

class LikesButton extends React.Component{
    constructor(props){
        console.log(props)
        // super作为函数调用时，代表父类的构造函数。ES6 要求，子类的构造函数必须执行一次super函数。
        super(props)
        this.state = {
            likes:0
        }
    }
    increaseLikes(){
        console.log(this);
        this.setState({
            likes: ++this.state.likes
        })
    }
    render(){
        return(
            <div className="likes-button-component">
                <button
                    type="button"
                    className="btn btn-outline-primary btn-lg"
                    onClick = {()=>{this.increaseLikes()}}
                >
                点赞{this.state.likes}
                </button>
            </div>
        )
    }
}
export default LikesButton

之所以采用箭头函数的方式，是因为防止找不到this