You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.0 KiB
52 lines
1.0 KiB
import React from 'react'
|
|
|
|
class Counter extends React.Component {
|
|
// 定义组件状态
|
|
state = {
|
|
count: 0,
|
|
list: ['one', 'two', 'three'],
|
|
person: {
|
|
name: 'Ken',
|
|
age: 20,
|
|
},
|
|
}
|
|
|
|
clickHandler = () => {
|
|
this.setState({
|
|
count: this.state.count + 1,
|
|
// // 数组修改,添加数组元素
|
|
// list: [...this.state.list, 'four', 'five'],
|
|
// // 对象修改
|
|
// person: { ...this.state.person, name: 'King' }
|
|
|
|
// 删除 - filter
|
|
list: this.state.list.filter((item) => item !== 'two'),
|
|
|
|
person: { ...this.state.person, age: '' },
|
|
})
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<>
|
|
<ul>
|
|
{this.state.list.map((item) => (
|
|
<li key={item}>{item}</li>
|
|
))}
|
|
</ul>
|
|
<div>
|
|
{this.state.person.name} {this.state.person.age}岁
|
|
</div>
|
|
<div>
|
|
<button onClick={this.clickHandler}>{this.state.count}次</button>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
}
|
|
|
|
function App() {
|
|
return <Counter></Counter>
|
|
}
|
|
|
|
export default App
|