我有一个简单的组件,看起来像这样:
import React from "react";
import './MyContainer.css';
class MyContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
showWhereClicked = (e) => {
console.log(`you have clicked X:${e.screenX} Y:${e.screenY}`);
// do stuff
}
render() {
return (
<div className="myContainer" onClick={this.showWhereClicked}>
I am 500px tall.
</div>
);
}
}
export default MyContainer;
每当我点击里面的任何地方<MyContainer />
,我收到一条控制台消息,给出我在屏幕上单击的位置的 X 和 Y 坐标。
我想放置一个 <div>
在鼠标单击的 X 和 Y 位置内。理想情况下是一个盒子或其他东西,比如说 100x100 像素宽。
稍后我希望实现一种让我自由移动这些的方法<div>
屏幕周围的组件。
我怎样才能做到这一点?
最佳答案
我处理这个问题的方法是在 js 中使用 css
。
您可以使用 position: absolute;
、top : yCoordinate
和 left : xCoordinate
css 属性设置任何 DOM 元素的位置。
// take control over the style of a component
const [style, setStyle] = useState(initialStyle);
const setCoordinates = (x,y) => {
// You don't need whitespace in here, I added it for readability
// I would recommend using something like EmotionJS for this
return `position:absolute;
left:${x}px;
top:${y}px;`
}
...
return(
<div
style = {style}
onClick = { e => {
const newStyle =
setCoordinates(e.target.screenX,
e.target.screenY);
setStyle(newStyle);
}}
></div>)
然后您可以将它们设置为任何形状或形式,并且应该可以看到所需的结果。您不需要重绘任何东西,因为 DOM 没有改变,只是 css 改变了。
关于javascript - 将 <div> 放在 React 中的 x,y 坐标处,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57509991/