ReactJs 中的这个关键字以及我们为什么会丢失上下文

IT技术 javascript reactjs
2021-05-12 23:51:23 

class Foo extends React.Component{
  constructor( props ){
    super( props );
  }
 
  handleClick(event){
    console.log(this); // 'this' is undefined
  }
 
  render(){
    return (
      <button type="button" onClick={this.handleClick}>
        Click Me
      </button>
    );
  }
}
 
ReactDOM.render(
  <Foo />,
  document.getElementById("app")
);

我对这个关键字感到红色，但我不明白为什么在这种情况下，当我单击按钮时this未定义？在这种情况下this应该指向类Foo，为什么呢windows object？在这种情况下，上下文如何丢失？

1个回答
handleClick = (event)=>{
    console.log(this); //
  }

这是由于上下文使用 arrow function

handleClick 是在按钮的点击事件上下文中调用的，因为这里指的是 handleClick 中的窗口上下文，但是当你使用箭头函数时它会解决这个问题

其它你可能感兴趣的问题
上一篇如何使用更新的 api url 从同一组件中调用 getServerSideProps？ 下一篇Typescript `typeof React.Component` 不扩展接口？无法定义高阶组件