React三属性之:state

作用:

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

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

使用:

this.state的值不能直接进行赋值操作,如:this.state.value_str = '修改的值',需要使用this.setState 方法

this.setState({修改的key:修改的value},数值发生改变后的函数),只会改变修改的属性,state中的其他属性不会变化

javascript 复制代码
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
 

效果如下

相关推荐
大怪v15 小时前
前端:人工智能?我也会啊!来个花活,😎😎😎“自动驾驶”整起!
前端·javascript·算法
我是天龙_绍15 小时前
vue3 props 如何写ts,进行类型标注
前端
叫我詹躲躲15 小时前
n8n 自动化工作流平台完整部署
前端·langchain·领域驱动设计
遂心_17 小时前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制
前端·javascript
IT_陈寒17 小时前
JavaScript 性能优化:5 个被低估的 V8 引擎技巧让你的代码快 200%
前端·人工智能·后端
岛风风17 小时前
关于手机的设备信息
前端
小仙女喂得猪17 小时前
2025 Android原生开发者角度的React/ReactNative 笔记整理
react native·react.js
ReturnTrue86817 小时前
nginx性能优化之Gzip
前端
w_y_fan18 小时前
Flutter 滚动组件总结
前端·flutter
wuli金居哇18 小时前
我用 Turborepo 搭了个 Monorepo 脚手架,开发体验直接起飞!
前端