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
 

效果如下

相关推荐
国家不保护废物几秒前
Vue组件通信全攻略:从父子传到事件总线,玩转组件数据流!
前端·vue.js
写不来代码的草莓熊1 小时前
vue前端面试题——记录一次面试当中遇到的题(9)
前端·javascript·vue.js
JinSo1 小时前
pnpm monorepo 联调:告别 --global 参数
前端·github·代码规范
程序员码歌1 小时前
豆包Seedream4.0深度体验:p图美化与文生图创作
android·前端·后端
urhero1 小时前
工作事项管理小工具——HTML版
前端·html·实用工具·工作事项跟踪·任务跟踪小工具·本地小程序
二十雨辰1 小时前
eduAi-智能体创意平台
前端·vue.js
golang学习记1 小时前
从0死磕全栈之Next.js connection() 函数详解:强制动态渲染的正确姿势(附实战案例)
前端
郝学胜-神的一滴2 小时前
Three.js光照技术详解:为3D场景注入灵魂
开发语言·前端·javascript·3d·web3·webgl
m0dw2 小时前
vue懒加载
前端·javascript·vue.js·typescript
国家不保护废物2 小时前
手写 Vue Router,揭秘路由背后的魔法!🔮
前端·vue.js