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
-
效果如下