Javascript 如何访问'；文件'；在一个班级里？

仅供参考，我是JavaScript的绝对初学者，我尝试过谷歌的解决方案，但我甚至不知道我不知道什么，所以我来到了这里

据我所知，addEventListener应该跟随鼠标移动frame div。然而，我的问题是document.addEventListener出现了一个解析错误，我不完全确定这是什么意思。这似乎只有在我单独键入文档，而不是像var frame=document.getElementById行那样将其分配给var时才会发生

class StickyFrame extends React.Component{
  render() {
    return(
      <div className="frame" >
        <StickyNote />
      </div>
    );
  }
  frame = document.getElementById('frame');
  document.addEventListener('mousemove', 
  function(e) {
    var x = e.clientX;
    var y = e.clientY;
    frame.style.left = x + "px";
    frame.style.top = y + "px";
  }
  );
}

类StickyFrame扩展了React.Component{
render（）{
返回(
);
}
frame=document.getElementById（'frame'）；
document.addEventListener（'mousemove'，
职能（e）{
var x=e.clientX；
变量y=e.clientY；
frame.style.left=x+“px”；
frame.style.top=y+“px”；
}
);
}

在React中，您可以使用事件处理程序，对于“mousemove”事件，您可以使用

onMouseMove

事件。请参阅文档

或者，如果要访问DOM节点，可以利用

Refs

。像这样：

类StickyFrame扩展了React.Component{
建造师（道具）{
超级（道具）；
this.myRef=React.createRef（）；
this.frame=this.frameValue.bind（this）；
}
frameValue（）{
//注意：我们正在访问“current”以获取DOM节点
这个.myRef.current；
}
render（）{
返回(
);
}
}

有关完整的解释，请参见文档：

Issues

在React中，查询DOM中的元素是反模式的，使用React ref可以访问底层DOMNodes

应通过组件生命周期方法添加和删除事件侦听器

代码

类StickyFrame扩展了React.Component{
frameRef=React.createRef（）；
处理程序（e）{
常数x=e.clientX；
常数y=e.clientY；
frame.current？style.left=x+“px”；
frame.current？.style.top=y+“px”；
}
componentDidMount（）{
document.addEventListener（'mousemove'，this.handler）；
}
组件将卸载（）{
document.removeEventListener（'mousemove'，this.handler）；
}
render（）{
返回(
);
}
}

不能只将代码放在类主体中，它应该放在构造函数中。尽管对于这个问题有更好的具体解决方案（见下面的答案）。

class StickyFrame extends React.Component{
  frameRef = React.createRef();

  handler(e) {
    const x = e.clientX;
    const y = e.clientY;
    frame.current?.style.left = x + "px";
    frame.current?.style.top = y + "px";
  }

  componentDidMount() {
    document.addEventListener('mousemove', this.handler);
  }

  componentWillUnmount() {
    document.removeEventListener('mousemove', this.handler);
  }

  render() {
    return(
      <div className="frame" ref={this.frameRef} >
        <StickyNote />
      </div>
    );
  }
}