React state 基础使用

Posted 2021-09-03 p71a3fj5

import React, { Component } from \'react\'

class index extends Component {
constructor(props) {

 super(props)
 this.state = {
   count:10,
   name:\'小刘\',
   obj: {
     a: 1,
     b: 2,
     c:3,
   } 
 }

}

setName() {

//  const { name } = this.state;
 this.setState({
   name:\'老刘\'
 })

}

setA() {

 //  const { obj } = this.state;
   const obj = Object.assign({},this.state.obj, { a:10})
 setTimeout(() => {
   this.setState({
    obj:obj
   })
  },1000)
}

setB() {

 const b={b:20}
 const obj = {
   ...this.state.obj,
   ...b
 }
 setTimeout(() => {
   this.setState({
   obj:obj
  })
 },2000)
 

}
componentDidMount() {

}
render() {

 const { name ,obj ,count} = this.state;
 
return (
  <div>
   
    {name}
    <button onClick={() => { this.setName() }}>点击变强</button> <br/>
    {count}
    <button onClick={() => this.setState({ count: count + 1 })}>count+1</button> <br/>
    
    Obj a的值是{obj.a}  <br/>
    Obj b的值是{obj.b} <br/>
    Obj c的值是{obj.c} <br/>
    <button onClick={()=>{this.setA()}}> 1秒后修改a的值</button>
    <button onClick={()=>{this.setB()}}> 2秒后修改b的值</button>
    
  </div>
)

}
}

export default index