React三属性之:state

青阳流月2023-09-14 5:01

作用:

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

效果如下