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
 

效果如下

相关推荐
吃饺子不吃馅13 小时前
如何设计一个 Canvas 事件系统?
前端·canvas·图形学
Baklib梅梅13 小时前
无头内容管理系统:打造灵活高效的多渠道内容架构
前端·ruby on rails·前端框架·ruby
over69713 小时前
浏览器里的AI魔法:用JavaScript玩转自然语言处理
前端·javascript
Amy_cx13 小时前
搭建React Native开发环境
javascript·react native·react.js
渣渣盟14 小时前
探索Word2Vec:从文本向量化到中文语料处理
前端·javascript·python·文本向量化
Pu_Nine_914 小时前
Vue 3 + TypeScript 项目性能优化全链路实战:从 2.1MB 到 130KB 的蜕变
前端·vue.js·性能优化·typescript·1024程序员节
云枫晖14 小时前
Webpack系列-Loader
前端·webpack
aggression14 小时前
代码敲击乐:让你了解前端的动静结合和移动端的适配性
前端
yinuo14 小时前
深入理解与实战 Git Submodule
前端
骑自行车的码农14 小时前
React 事件收集函数
前端·react.js