Reactjs 无法读取属性''；使用addEventListener、gsap和react定义未定义的

我遇到了一个问题，我试图用我的光标和gsap制作一个动画并做出反应，但我遇到了一个错误

“TypeError:无法读取未定义的属性“页面”

如果有人能帮我，那就太好了。谢谢

class App extends React.Component {
  constructor(props) {
    super(props);
    this.page = React.createRef();
    this.cursor = React.createRef();
  }
  render() {
    return (
      <div className="App" ref={this.page} >
        <div>hey</div>
        <div className="cursor" ref={this.cursor}></div>
      </div>
    );
  }
}
const enterMouse = () => {
//some code
};

const moveMousePos = (e) => {
//some code
};

this.page.addEventListener('mouseenter', enterMouse);
this.page.addEventListener('mousemove', moveMousePos);

export default App;

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.page=React.createRef（）；
this.cursor=React.createRef（）；
}
render（）{
返回(
嘿
);
}
}
常量鼠标=（）=>{
//一些代码
};
常量moveMousePos=（e）=>{
//一些代码
};
this.page.addEventListener（'mouseenter'，enterMouse）；
this.page.addEventListener（'mousemove'，moveMousePos）；
导出默认应用程序；

您输入鼠标移动鼠标点的函数范围不正确。 现在，它们位于组件块之外。

---

您需要将它们移动到组件中。

谢谢您的回答，但我收到一个错误“TypeError:this.page.addEventListener不是函数”@askemeline尝试将

addEventListener

s移动到组件内部。@askemeline

addEventListener

s需要位于

componentDidMount

生命周期函数中