React三属性之:state

这篇具有很好参考价值的文章主要介绍了React三属性之:state。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

作用:

state是用于在组件中存储数据,称之为"状态机"

类似于vue2中的data属性,不过操作和vue中data差别很大.

使用:

this.state的值不能直接进行赋值操作,如:this.state.value_str = '修改的值',需要使用this.setState方法
this.setState({修改的key:修改的value},数值发生改变后的函数),只会改变修改的属性,state中的其他属性不会变化

import { cloneDeep } from "lodash";
import React from "react";
class StateTest extends React.Component{
    state  = {
        value_str:'字符串',
        value_arr:[
            {
                value:'数据1',
                label:'标题1'
            },
            {
                value:'数据2',
                label:'标题2'
            }
        ],
        value_obj:{
            name:'王惊涛',
            age:27,
        }
    }
    //修改字符串的值
    changeValueStr = (e)=>{
       this.setState({
           value_str:e.target.value
       },()=>{
           console.log(this.state,'状态机的值发生改变')
       })
    }
    //修改数组的值
    changeValueArr = (e,i)=>{
    //写法1
    //  let List = cloneDeep(this.state.value_arr)
    //  this.setState({value_arr:List.map((item,index)=>index === i?{...item,'value':e.target.value}:item)})
     //写法2
     let newItem = {
         label:this.state.value_arr[i].label,
         value:e.target.value
     }
     let List = cloneDeep(this.state.value_arr)
     List[i] = newItem
     this.setState({value_arr:List})
    }

     //修改对象的值
     changeValueObj = ()=>{
      this.setState({value_obj:{
          name:'Jingtao Wang',
          age:33
      }})
     }

    render(){
        return(
            <div>
                <h4>字符串操作</h4>
                <p><span>字符串值</span><input type="text" value={this.state.value_str} onInput={(e)=>{this.changeValueStr(e)}}/></p>
                <h4>数组操作</h4>
                {this.state.value_arr.map((item,index)=><p><span>{item.label}</span><input value={item.value} onInput={(e)=>this.changeValueArr(e,index)}></input></p>)}
                <h4>对象操作</h4>
                <p>名字:{this.state.value_obj.name} 年龄:{this.state.value_obj.age}</p>
                <button onClick={this.changeValueObj}>修改数据</button>
            </div>
        )
    }
}
export default StateTest
 

效果如下

React三属性之:state,react,react.js,前端文章来源地址https://www.toymoban.com/news/detail-704890.html

到了这里,关于React三属性之:state的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端框架之争:Vue.js vs. React.js vs. Angular

    🎉欢迎来到Web前端专栏~前端框架之争:Vue.js vs. React.js vs. Angular ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒🍹 ✨博客主页:IT·陈寒的博客 🎈该系列文章专栏:架构设计 📜其他专栏:Java学习路线 Java面试技巧 Java实战项目 AIGC人工智能 数据结构学习 🍹文章作者技术和水平有限,如果

    2024年02月07日
    浏览(93)
  • 步入React正殿 - State进阶

    目录 扩展学习资料 State进阶知识点 状态更新扩展 shouldComponentUpdate PureComponent 为何使用不变数据【保证数据引用不会出错】  单一数据源  @/src/App.js @/src/components/listItem.jsx 状态提升  @/src/components/navbar.jsx @/src/components/listPage.jsx @src/App.js 有状态组件无状态组件 Stateful【有状态

    2024年02月12日
    浏览(36)
  • React 18 选择 State 结构

    参考文章 构建良好的 state 可以让组件变得易于修改和调试,而不会经常出错。以下是在构建 state 时应该考虑的一些建议。 当编写一个存有 state 的组件时,需要选择使用多少个 state 变量以及它们都是怎样的数据格式。尽管选择次优的 state 结构下也可以编写正确的程序,但有

    2024年02月10日
    浏览(55)
  • 如何使用前端框架(React、Angular、Vue.js等)?该如何选择?

    聚沙成塔·每天进步一点点 前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而

    2024年02月07日
    浏览(60)
  • React 18 state 状态更新函数

    参考文章 设置组件 state 会把一次重新渲染加入队列。但有时可能会希望在下次渲染加入队列之前对 state 的值执行多次操作。为此,了解 React 如何批量更新 state 会很有帮助。 在下面的示例中,可能会认为点击 “+3” 按钮会使计数器递增三次,因为它调用了 setNumber(number +

    2024年02月13日
    浏览(40)
  • React 18 用 State 响应输入

    参考文章 React 控制 UI 的方式是 声明式 的。不必直接控制 UI 的各个部分,只需要声明组件可以处于的不同状态,并根据用户的输入在它们之间切换。这与设计师对 UI 的思考方式很相似。 当设计 UI 交互时,可能会去思考 UI 如何根据用户的操作而响应 变化 。想象一个允许用

    2024年02月12日
    浏览(31)
  • 前端刷新页面的五种方法(含原生js、vue和react)

    1、window.history.go(0)方法 2、location.reload()方法 3、location.href=location.href方法 4、vue-router方法 5、react-router方法

    2024年02月16日
    浏览(51)
  • React 如何获取上一次 state 的值

    一、用 ref 存储上一次的 state 类似 usePrevious 二、通过 setState 的入参改为函数获取

    2024年02月10日
    浏览(83)
  • 区分react中的state和 props

    在 React 中, state 和 props 是两个不同的概念,用于处理组件的数据和属性。它们具有以下区别: 数据来源: state (状态):是组件内部自己管理和维护的数据,用于表示组件的内部状态。可以通过 setState() 方法来更新和改变组件的状态。 props (属性):是从组件外部传递给

    2024年02月04日
    浏览(35)
  • React 18 更新 state 中的对象

    参考文章 state 中可以保存任意类型的 JavaScript 值,包括对象。但是,不应该直接修改存放在 React state 中的对象。相反,当想要更新一个对象时,需要创建一个新的对象(或者将其拷贝一份),然后将 state 更新为此对象。 可以在 state 中存放任意类型的 JavaScript 值。 在 state

    2024年02月13日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包