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)})//写法2let newItem = {label:this.state.value_arr[i].label,value:e.target.value}let List = cloneDeep(this.state.value_arr)List[i] = newItemthis.setState({value_arr:List})}//修改对象的值changeValueObj = ()=>{this.setState({value_obj:{name:'Jingtao Wang',age:33}})}render(){return(
字符串操作
字符串值{this.changeValueStr(e)}}/>
数组操作
{this.state.value_arr.map((item,index)=>
{item.label}this.changeValueArr(e,index)}>
)}
对象操作
名字:{this.state.value_obj.name} 年龄:{this.state.value_obj.age}
修改数据)}
}
export default StateTest

效果如下

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！