学习React第四篇：使用setState管理React组件状态

最新推荐文章于 2022-10-08 21:25:33 发布

最孤单的人

最新推荐文章于 2022-10-08 21:25:33 发布

阅读量232

点赞数

分类专栏： # Reactjs 入门教程文章标签： React组件状态 State

本文链接：https://blog.csdn.net/qq_20613731/article/details/109293720

版权

Reactjs 入门教程专栏收录该内容

18 篇文章 1 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

这篇博客探讨了React组件状态的概念，强调其与props的区别。状态是可以被组件自身更新的，允许组件UI发生变化。文章通过示例代码解释如何在State.js和index.js中使用setState方法，并指出组件状态的可变性和Props的只读性。同时，提到了状态上移的场景，以及在学习React基础知识时理解组件状态的重要性。

摘要由CSDN通过智能技术生成

继编写在React组件上设置属性(PropTypes)

与props不同，props是要作为静态值传递到我们的组件中的值的集合，而并非要被我们的组件更改。状态表示将要管理的值的集合，并由我们的组件更新。接下来，使用setState管理React组件状态：

示例文件 State.js

import React from 'react'

class State extends React.Component {
    //为了让我们开始使用状态，我将在这里设置一个构造函数方法
    constructor() {
        // 第一件事就是，将调用super。这将为关键字“ this”提供组件中的上下文，而不是其父类React.Component。
        super(); 
    
        this.state = {
            txt: "this is the state txt",
            cat: 0
        }
    }

    // 创建update()的方法，该方法将接收一个事件 e 来更新状态
    update(e) {
        this.setState({ txt: e.target.value })
    }

    render(