提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
React创建一个计数器
一、利用state实现
状态(state)即数据,是组件内部的私有数据,只能在组件内部使用
代码如下(示例):
import React from "react"
import ReactDOM from "react-dom"
//React事件处理
class App extends React.Component{
//简化语法
state = {
count:0
}
render(){
return(
<div>
<h1>计数器:{this.state.count}</h1>
<button onClick={()=>{
this.setState({
count:this.state.count+ 1
})
}}>+1</button>
</div>
)
}
}
//渲染
ReactDOM.render(<App />, document.getElementById('root'))
运行结果如下:
点击后: