时间戳

首页 > 解决方案 > 地方

在 React 中的 x,y 坐标处

javascript - 地方
在 React 中的 x,y 坐标处

问题描述

我有一个简单的组件，如下所示：

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 位置放置一个内部。理想情况下是一个盒子或其他东西，比如 100x100px 宽。

后来我希望实现一种方法，让我可以<div>在屏幕上自由移动这些组件。

我怎样才能做到这一点？

标签： javascriptcssreactjs

解决方案

我处理这个问题的方法是使用css in js.

position: absolute;您可以使用,top : yCoordinate和left : xCoordinatecss 属性设置任何 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。

推荐阅读