反应无法获取其中的属性

  • 本文关键字:属性 获取 reactjs
  • 更新时间 :
  • 英文 :


初始码

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>&nbsp;
<button onClick={this.decrease}>decrease</button>&nbsp;
<button onClick={this.increaseOdd}>increase when odd</button>&nbsp;
<button onClick={this.AsynIncrease}>asynchronize increase</button>
</div>
)
}
}

运行结果只是写一个非常简单的程序,似乎有一个属性selectNode,但当我试图打印出来,它变得没有定义。我只是好奇这是什么原因,我不是一个有经验的前端开发人员,这真的让我很困惑

当你想要访问一个道具时,你需要通过props对象来访问它

this.props.selectNode