import React from "react";
// 组件状态
class TestComponents extends React.Component{
// 1.定义组件状态
state = {
// 在这里定义各种属性,全都是当前组件的状态
name: '状态',
count: 0,
list: [1,2,3,4],
person: {
name: '姓名',
age: 12
}
}
changeName = () => {
// 3.修改state中的状态name
// 注意:不可以直接赋值修改 必须通过一个方法 steState
this.setState({
name: '修改状态'
})
}
changeState = () => {
// 修改count
// this.setState({
// count: this.state.count + 1
// })
// 修改数组
// this.setState({
// list: [...this.state.list,5]
// })
// 对象修改
// this.setState({
// person: {
// ...this.state.person,
// age: 23
// }
// })
// 一次性全部修改
this.setState({
count: this.state.count + 1,
list: [...this.state.list,5],
person: {
...this.state.person,
age: 23
}
})
}
// 删除数组中的值
changeList = () => {
this.setState({
list: this.state.list.filter(item => {
return item !=3
})
})
}
render() {
// 2.使用状态
return <div>
<div>组件状态</div>
<div>当前name为: {this.state.name}</div>
<button onClick={this.changeName}>修改name</button>
<ul>
{this.state.list.map(item =>
<li>{item}</li>
)}
</ul>
<div>count值为:{this.state.count}</div>
<div>
姓名:{this.state.person.name}
年龄:{this.state.person.age}
</div>
<button onClick={this.changeState}>点击修改state</button>
<button onClick={this.changeList}>点击删除list</button>
</div>
}
}
function App() {
return (
<div className="App">
<TestComponents/>
</div>
);
}
export default App;
* 总结
1.编写组件其实就是编写原生js类或者函数
2.定于状态必须通过state 实例属性的方法 提供一个对象 名称是固定的就叫state
3.修改state中的任何属性 都不可以直接赋值 必须用steState方法 这个方法来自于继承而得到
4.这里的this关键词 很容易出现指向错误的问题 上面的写法是最推荐的也是最规范的 没有this指向问题
*注意
不要直接修改状态的值,而是基于当前状态创建新的状态值