react中需要操作数据的一般都用类组件,数据放在state中,操作数据需要在setState中写代码,直接修改state中的数据会报错,
我在写代码的时候发现react好像不支持变量++这种书写方式,用this.state.count++,点击按钮没有反应,
class Hello extends React.Component {
state = {
count: 10
}
render() {
return (
<div>
<h1>数量:{this.state.count}</h1>
<button onClick={() => {
this.setState({
count: this.state.count+1
// count: this.state.count++ 这边没有反应,用箭头函数是因为this指向上一级,是组件实例对象
})
}}>点我加1</button>
</div>
)
}
}
将操作数据的逻辑抽离出来时,会报错,原因是this指向的问题,抽离出来后this指向undefined,应该要指向组件实例对象才行,
解决办法1,用箭头函数调用方法,箭头函数的this看上一级
addNum(){
this.setState({
count: this.state.count+1
// count: this.state.count++ 这边没有反应
})
}
render() {
return (
<div>
<h1>数量:{this.state.count}</h1>
<button onClick={()=> this.addNum()}>点我加1</button>
</div>
)
}
方式二:用bind改变函数的this指向,constructor构造函数中的this指向是组件实例对象
constructor(){
super()
this.state = {
count: 10
}
this.addNum = this.addNum.bind(this)
}
addNum(){
this.setState({
count: this.state.count+1
// count: this.state.count++ 这边没有反应
})
}
render() {
return (
<div>
<h1>数量:{this.state.count}</h1>
<button onClick={this.addNum}>点我加1</button>
</div>
)
}
第三种方法是在定义方法的时候就用箭头函数,具体如下
addNum = () =>{
this.setState({
count: this.state.count+1
// count: this.state.count++ 这边没有反应
})