有没有办法分配react组件的坐标以匹配event.screenX和event.screen Y

Question

我原以为这会奏效，但似乎比我想象的要复杂。我正试图在我的React应用程序中编程一个事件，在我点击的地方会出现一个简单的组件(event.screenX，event.screen Y(

下面的块来自我的有状态组件，它处理点击和窗口。

constructor(props) {
super(props);
this.state = {
'objects': []
}
ClickHandler(event) {
let tempObjects = this.state.objects;
tempObjects.push({
'xCoord': event.screenX,
'yCoord': event.screenY
});
this.setState({
'objects': tempObjects
});
}
ComponentDidUpdate() {
this.divContent = this.state.objects.map( obj => {
//Coordinates passed in as props and assigned in style
<Object xCoord={obj.xCoord} yCoord={obj.yCoord}/>
});
}
render() {
return (
<div onClick={ClickHandler}>
{this.divContent}
</div>
);
}
}

这是我试图使其出现的对象的组件

Object(props) {
let objCoordinates= {
'top': props.yCoord,
'left': props.xCoord
};
return <div style={objCoordinates}></div>;
}

问题是，React应用程序在点击时会在屏幕上显示对象，但坐标永远不会与鼠标位置匹配，而且经常超出页面边界，看不到它们。

以前有其他人遇到过这个问题吗？如果有，你是如何解决的？

谢谢，Ben

Answer 1

如果没有合适的代码平台，很难对此进行研究。但要注意这样做：

let tempObjects = this.state.objects;
tempObjects.push({
'xCoord': event.screenX,
'yCoord': event.screenY
});

当你这样推时，你实际上是在通过引用推到状态数组中，这是你永远不应该做的

你最好这样做：

let tempObjects = [...this.state.objects];
tempObjects.push({
'xCoord': event.screenX,
'yCoord': event.screenY
});