Javascript 眼球不会跟随移动事件

我正在尝试使用react在网页中创建一个跟踪光标的眼睛。我已经成功地使用了普通的HTML、CSS和JS，但是在使用React时遇到了问题。我已经使用onMouseMove调用了眼球事件监听器，但它只在单击网页时起作用。请告诉我，我做错了什么

这是我的组件：

import React，{Component}来自“React”；
导入“/Eye.css”；
类眼扩展组件{
建造师（道具）{
超级（道具）；
}
状态={
左:0,，
排名：0，
};
componentDidMount（）{
window.addEventListener（“mousemove”，this.\u onMouseMove）；
}
_onMouseMove=（e）=>{
var balls=document.getElementsByClassName（“ball”）；
控制台日志（例如nativeEvent）；
var x=（e.clientX*100）/window.innerWidth+“%”；
变量y=（e.clientY*100）/window.innerHeight+“%”；
球[0]。style.left=x；
球[0]。style.top=y；
balls[0]。style.transform=“translate（-“+x+”，-“+y+”）；
this.setState（{left:x，top:y}）；
};
render（）{
返回(
);
}
}
导出默认眼

您正在注册新的

文档。addEventListener

每当有人移动鼠标时，请小心您的电脑可能会着火，或者很抱歉，我还没有反应过来，仍在努力理解组件状态和道具。我如何一步一步地处理这个问题？目前我正在阅读你给我的文章。我想了解，如果你能告诉我正确的方法，那就太好了@阿列克斯