React事件绑定this指向的问题

**

只有通过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