React事件中的 this为什么是null?

为什么this为null?

class App extends Component {


    handleClick(e) {
        console.log(this)//为什么是 null?
    }

    render() {
        return (
         
            <h2 onClick={this.handleClick}>React</h2>

        );
    }
}

export default App;

下面这种情况如何解释?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="func()">click</button> // 打印 undefined
<button onclick="app.handleClick()">click</button> // 打印 App
<script>

    class App {
        handleClick() {
            console.log(this)
        }
    }
    const app = new App
    const func = app.handleClick
</script>
</body>
</html>

所以什么时候会打印undefined,什么时候会打印null,什么时候正常打印?

阅读 4k
2 个回答
 <h2 onClick={this.handleClick.bind(this)}>React</h2>

简单来说在JS中this的指向可以简单粗暴的理解为谁调用我,我就会指向谁。但是如果是onClick的方式调用类中的方法,方法里面的this不是指向当前实例二十H2那个dom元素,所以打印出this就是undefined的。知道原因解决就好办了。一开始就把方法里面的this绑定到组件的实例上或者使用不绑定this的箭头函数

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题