**
只有通过script链接引入才会存在这个问题,使用create React App 创建react项目则不会存在该问题。
**
<script type="text/babel">
class Toggle extends React.Component{
constructor(props){
super(props);
this.state={
isToggleOn:true
}
}
handleClick(){
console.log(this); //打印出来的this为undefined
console.log(!this.state.isToggleOn);
this.setState(state=>({
isToggleOn:!this.state.isToggleOn
}))
}
render(){
return(
<button onClick = {this.handleClick}>
{this.state.isToggleOn?'NO':'OFF'}
</button>
)
}
}
ReactDOM.render(<Toggle/>,document.querySelector("#root"))
</script>
解决方法:
1)使用create React app 创建react项目,也可以写成
handleClick = () => {
console.log('this is:', this);
}
可以拿到期望的this
2)渲染函数改为
render(){
return(
<button onClick = {()=>this.handleClick}>
{this.state.isToggleOn?'NO':'OFF'}
</button>
)
}
但是该方法在每次进行渲染时都会创建不同的回调函数。
资料来源:https://react.docschina.org/docs/handling-events.html