初始码
import React, { Component } from 'react'
const add='add'
const sub='sub'
const oddAdd='oddAdd'
const AsynAdd='AsynAdd'
export default class Count extends Component {
state={count:0}
increase=(add)=>{
console.log(this,this.selectNode,this.state)
// const{value}=this.selectNode
// const {count}=this.state
// this.setState({count:count+value*1})
return (e)=>{
console.log('after',this,this.selectNode)
const{value}=this.selectNode
const {count}=this.state
this.setState({count:count+value*1})
}
}
decrease=()=>{
const{value}=this.selectNode
const {count}=this.state
this.setState({count:count-value*1})
}
increaseOdd=()=>{
const{value}=this.selectNode
const {count}=this.state
if(count%2!==0)
this.setState({count:count+value*1})
}
AsynIncrease=()=>{
setTimeout(()=>{const{value}=this.selectNode
const {count}=this.state
this.setState({count:count+value*1})},1000)
}
render() {
return (
<div>
<h1>Total sum is {this.state.count}</h1>
<select ref={c=>this.selectNode=c}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button onClick={this.increase(add)}>increase</button>
<button onClick={this.decrease}>decrease</button>
<button onClick={this.increaseOdd}>increase when odd</button>
<button onClick={this.AsynIncrease}>asynchronize increase</button>
</div>
)
}
}
运行结果只是写一个非常简单的程序,似乎有一个属性selectNode,但当我试图打印出来,它变得没有定义。我只是好奇这是什么原因,我不是一个有经验的前端开发人员,这真的让我很困惑
当你想要访问一个道具时,你需要通过props对象来访问它
this.props.selectNode