今天写react的一个demo,实现一个实时显示一个数字,进行加一、减一的功能。
第一写的代码如下:
import React from 'react';
import ReactDom from 'react-dom';
class App extends React.Component{
constructor(props){
super(props)
this.state = {
num:0
}
}
add = ()=>{
this.setState({
num:this.state.num++
})
}
dec = ()=>{
this.setState({
num:this.state.num--
})
}
render(){
console.log(this.state.num)
return (
<div>
<h1>计数:{this.state.num}</h1>
<button onClick={this.add}>加一</button>
<button onClick={this.dec}>减一</button>
</div>
)
}
}
ReactDom.render(
<App/>,
document.querySelector('#root')
)
但是页面的值一值为零。
第二次修改后,实现页面功能。
import React from 'react';
import ReactDom from 'react-dom';
class App extends React.Component{
constructor(props){
super(props)
this.state = {
num:0
}
}
add = ()=>{
this.setState({
num:this.state.num+1
})
}
dec = ()=>{
this.setState({
num:this.state.num-1
})
}
render(){
console.log(this.state.num)
return (
<div>
<h1>计数:{this.state.num}</h1>
<button onClick={this.add}>加一</button>
<button onClick={this.dec}>减一</button>
</div>
)
}
}
ReactDom.render(
<App/>,
document.querySelector('#root')
)
两个代码不同之处在于,一个是使用了++、–,另一个使用+1,-1。