作用:
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
效果如下文章来源:https://www.toymoban.com/news/detail-704890.html
文章来源地址https://www.toymoban.com/news/detail-704890.html
到了这里,关于React三属性之:state的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!