import React, { Component } from "react"
export default class State extends Component {
constructor() {
super()
this.state = {
name: '张三',
num: 10,
json: {
story: "呼号浩特",
hobby: '杏子'
},
arr:[
<li>杏花</li>,
<li>杏仁</li>,
<li>杏树</li>,
<li>杏皮</li>,
<li>杏壳</li>
]
}
};
changeName (v) {
// this.state.name=v
// console.log(this.state.name);//但是不会引起页面的重新渲染
// 如果要让页面重新渲染要使用 setstate方法
this.setState({
name: v
})
}
changesex () {
// 自加1
// this.setState({
// num: ++this.state.num //++只能在前 不能在后(详解++在前和在后的原理)
// })
// 自加10 setState是异步操作 console.log()是同步操作 典型难忘
this.setState({
num:this.state.num+10
})
console.log(this.state.num);
}
changehobby (v) {
//错误方式1
// this.state.json.hobby=v //直接修改肯定是不行的
//错误方式2
// this.setState({
// json:{
// hobby:v //修改了 但是json就一个值了
// }
// })
//正确方式1
// 1、取出来(全部)
// var hb = this.state.json
// // 2、修改
// hb.hobby = v
// // 3、放回去
// this.setState({
// json:hb
// })
//正确方式2
this.setState({
json:{
...this.state.json,
hobby:v
}
})
}
render () {
return (
<div>
<p>{this.state.name}</p>
<button onClick={() => this.changeName("李四")}>哈哈哈</button>
<p>{this.state.num}</p>
<button onClick={this.changesex.bind(this)}>++</button>
<p>{this.state.json.story}</p>
<p>{this.state.json.hobby}</p>
<button onClick={this.changehobby.bind(this, '钵钵鸡')}>吃饭</button>
{
this.state.arr
}
</div>
)
}
}