组件的state属性

落日映苍穹つ 2022-05-15 06:41 190阅读 0赞

组件的三大属性之一：state属性

（１）组件被称为“状态机”，通过更新组件的状态值来更新对应的页面显示（重新渲染）。

1>初始化状态：

constructor(props){
            super(props);
            //初始化状态
            this.state = {
                stateProp1:value1,
                stateProp2:value2
            };
       
        }

2>读取某个状态值：

this.state.statePropertyName

3>更新状态——>组件界面更新

this.setState({
                stateProp1:value1,
                stateProp2:value2
            });

下面是一个小例子：

import React, { Component } from 'react';
    class State extends Component{
        constructor(props){
            super(props);
            //初始化状态
            this.state = {
                isLike:true
            };
            //改变changeLike的this指向
            this.changeLike = this.changeLike.bind(this);
        }
       changeLike(){
       //改变状态
            this.setState({
                isLike:!this.state.isLike
            });
       };
        render(){
            let {isLike} = this.state;
            let msg = isLike?"I love you":"You love me";
            return(
                <h1 onClick={this.changeLike}>
                {msg}
                </h1>
            )
        }
    }
    export default State;

发表评论取消回复

表情：

评论列表（有 0 条评论，190人围观）

还没有评论，来说两句吧...

相关阅读

相关组件的props属性

目录 1：使用props的作用： 2：props自定义属性的用法： 3：集合v-bind使用自定义属性： 4：props自定义属性是只读的： 5：default默认值

比眉伴天荒/ 2024年02月05日 11:11/ 0 赞/ 61 阅读

相关 React【事件对象、组件关系（组件的props、子组件向父组件传递数据）、组件组合（组件状态State、State的更新、setState重新渲染组件跟子组件、基于props初始化）】(二)

![b5d2d14a29f04681a5a5d04be03c12bb.gif][] 文章目录事件对象事件处理程序传递参数函数组件与 class 组件组

客官°小女子只卖身不卖艺/ 2023年10月15日 12:53/ 0 赞/ 54 阅读

相关 React 三大属性state,props,refs以及组件嵌套的应用

React 三大属性state,props,refs以及组件嵌套的应用该项目实现了一个简单的表单输入添加列表的内容 ![1][] ![2][] 代码如下

男娘i/ 2023年02月23日 03:36/ 0 赞/ 113 阅读

相关 React —— 组件实例的三大核心属性 state，props，refs

React —— 组件实例的三大核心属性 state，props，refs React —— 组件实例的三大核心属性 state，props，refs

﹏ヽ暗。殇╰゛Y/ 2022年11月07日 14:47/ 0 赞/ 213 阅读

相关 React学习笔记三——组件三大属性state、props和refs详解

state 1.类中方法this的指向 constructor和render里的this指向类组件的实例对象在类组件内部定义的普通函数，作为onClick

素颜马尾好姑娘i/ 2022年10月09日 03:06/ 0 赞/ 226 阅读

相关组件实例的三大属性state,props,refs

组件实例的三大属性 state 我们都说React是一个状态机，体现是什么地方呢，就是体现在state上，通过与用户的交互，实现不同的状态，然后去渲染UI

布满荆棘的人生/ 2022年09月01日 08:28/ 0 赞/ 207 阅读

相关 React 中的组件、Prop 和 State

盖房子要想理解这些概念是什么以及如何使用它们，我们先来写一个小示例。就盖个房子如何？ ![这里写图片描述][70] 组件如果你还记得我们在前面文章中所讨论

你的名字/ 2022年05月17日 10:37/ 0 赞/ 250 阅读

相关组件的state属性

组件的三大属性之一：state属性（１）组件被称为“状态机”，通过更新组件的状态值来更新对应的页面显示（重新渲染）。 1>初始化状态： constructor(

落日映苍穹つ/ 2022年05月15日 06:41/ 0 赞/ 191 阅读

相关 React Native中组件的props和state

一、组件的属性(props)和状态(state) 　　1.属性（props）　　它是组件的不可变属性（组件自己不可以自己修改props）。　　组件自身定义了一

青旅半醒/ 2021年12月14日 16:57/ 0 赞/ 359 阅读

相关 React如何修改深层state属性

> 遇到的环境： this.state=({ key:1, funcTree:null, checkedKeys:[

水深无声/ 2021年09月24日 11:50/ 0 赞/ 274 阅读