组件的state属性

落日映苍穹つ 2022-05-15 06:41 182阅读 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 条评论，182人围观）

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

相关阅读

相关在React中，什么是组件的状态（state）？如何更新组件的状态？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 创建和初始化状态 ⭐ 更新状态 ⭐ 注意事项 ⭐ 写在最后 -----------------

川长思鸟来/ 2023年10月16日 13:18/ 0 赞/ 37 阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关 React 中的组件、Prop 和 State

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

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

相关组件的state属性

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

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

相关 React Native中组件的props和state

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

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

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

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

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

相关 vuex中计算属性来代理state数据

<div id="app">  <!-- <input ty

Myth丶恋晨/ 2021年09月02日 10:01/ 0 赞/ 391 阅读