访问通过的容器的位置

Question

Onmousedown 事件，我想在通过容器时更改 container.But 的位置我无法访问 container.Below 的位置，下面是 code.I 正在调用为了改变 container.But 的位置，mousedown 事件上的函数 catchItem 抛出错误如下：类型错误：无法设置未定义的属性 'left'


import React, { useState, useEffect, useCallback } from "react";
import ReactDom from "react-dom";
import {AnchorButton, Intent, ProgressBar} from "@blueprintjs/core";
import "./style.scss";

import _ from "lodash";
import { Icon } from "react-icons-kit";
import {remove} from 'react-icons-kit/fa/remove';

import "./style.scss";
var mousePosition;
var offset = [0,0];
var div;
var isDown = false;

export class Core  extends React.Component{
    constructor(props){
        super(props)
        //Setting the state
        this.state = {
            loadedFiles:[],
        };

    };





    onFileLoad(e) {
        const file = e.currentTarget.files[0];
        let fileReader = new FileReader();
        fileReader.onload = () => {
            //console.log("Image Loaded: ", fileReader.result);
            const file = {


                data: fileReader.result,
                isUploading:false
            }

            this.addLoadedFile(file);
        }

        fileReader.onabort = () => {
            alert("Reading Aborted");
        }
        fileReader.onerror = () => {
            alert("Error in Reading")
        }

        fileReader.readAsDataURL(file);



        //file.onmousedown=this.catchItem(e);



    }
    addLoadedFile(file){
        this.setState((prevState) => ({ loadedFiles: [...prevState.loadedFiles, file]}));
    }
    removeLoadedFile(file){
        this.setState((prevState) => {
            let loadedFiles = prevState.loadedFiles;
            let newLoadedFiles = _.filter(loadedFiles, (ldFile) => {
                return ldFile!=file;
            });
            return { loadedFiles : newLoadedFiles }
        });
    }
    removeAllLoadedFile(){
        this.setState({loadedFiles : []});
    }
    catchItem(e) {
        this.style.left = e.pageX - this.clientWidth / 2 + "px";
        this.style.top = e.pageY - this.clientHeight / 2 + "px";
        this.onmousemove = function(e) {
        this.style.left = e.pageX - this.clientWidth / 2 + "px";
        this.style.top = e.pageY - this.clientHeight / 2 + "px";
        }
        this.onmouseup = function() {
        this.onmousemove = null; // onmouseup event [ redirect mousemove event signal to null instead of the drag-able element]
        }
    }



    render(){

        const { loadedFiles } = this.state;
        return(

        <div>
                <div className="header">

                </div>
                <div className="function">
                    <div className="tools">

                        <button className="button"

                            onClick={()=>this.fileInput.click()}

                        >
                            Components
                        </button>




                    </div>
                    <div className="grid">
                    <input 
                    type="file"
                    className="file"
                    id="file-browser-input"
                    name="file-browser-input"
                    ref ={input=>this.fileInput=input}
                    onDragOver={(e)=>{
                        e.preventDefault();
                        e.stopPropagation();
                    }


                    }
                    onDrop={this.onFileLoad.bind(this)}
                    onChange={this.onFileLoad.bind(this)}
                    onMouseDown={this.catchItem.bind(this)}
                    //onMouseMove={this.mousemove.bind(this)}
                    //onMouseUp={this.mouseup.bind(this)}

                    />
                    <div style={{left:"5px",top:"5px"}}
                    className="files-preview-container" 

                    onMouseDown={this.catchItem.bind(this)}>
                        {loadedFiles.map((file,idx) => {
                            return <div
                                className="file"
                                key={idx}
                                >
                                <img src = {file.data}/>


                            </div>
                        })}
                    </div>





                    </div>
                    <div className="ui">

                    </div>

                </div>
                <div className="footer">

                </div>
        </div>
        )
    }
}

export default Core

Answer 1

可以通过SyntheticEvent获取容器的位置

catchItem(e) {
    console.log(e.target.style.left);
    console.log(e.target.getBoundingClientRect());
}

访问通过的容器的位置

Accessing the position of a passed container

reactjs

mouseevent

event-listener

mousedown