将<div>放置在React中的x,y坐标处

时间:2019-08-15 12:55:14

标签: javascript css reactjs

我有一个简单的组件,看起来像这样:

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>组件的方法。

我该如何实现?

2 个答案:

答案 0 :(得分:2)

我将使用css in js处理此问题。

您可以使用position: absolute;top : yCoordinateleft : 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。

答案 1 :(得分:-1)

   class MyContainer extends React.Component {
    constructor(props) {

        super(props);

        this.state = {
            placedDiv:{
                top:-9999px;
                left:-9999px; // hide div first
                width:100px;
                height:100px;
                position:absolute;
            }
        };

    }

    showWhereClicked = (e) => {
        console.log(`you have clicked X:${e.screenX} Y:${e.screenY}`);
        this.setState({
            placedDiv:{
                top:e.screenY + 'px'
                left:e.screenX + 'px'
            }
        })

        // do stuff
    }



    render() {
        return (
            <div className="myContainer" onClick={this.showWhereClicked}>
                I am 500px tall.
                <div style={this.state.placedDiv}></div>
            </div>
        );
    }
}

export default MyContainer;

.myContainer {
position:relative /// in CSS!!!
}