reactjs - 为什么我的盒子不去确切的坐标？

Question

我尝试在渲染大图像的地方执行此代码，单击该图像后，会根据我单击的位置出现一个红色框，问题是每当我单击一个位置时，该框都会出现在不同的位置位置，一些框更靠左或更靠上。

import React, {useState} from 'react'
import mainImage from '../img/marioBrosMain.jpg'
import '../main.css'
import Box from '../pages/box.js'

function Main() {

  const [style, setStyle] = useState();

  const imageClick = (x, y) => {
    const newStyle = {position: "absolute",
    zIndex: 2,
    borderRadius: "2px solid red",
    border: "2px solid red",
    height: "50px",
    paddingLeft: "50px",
            left:`${x}px`,
            top:`${y}px`
          }
    return newStyle
  }

    return (
        <div id="frame">
          <div id="mainImage" style = {style}></div>
          <img src={mainImage} className="marioBros____image" onClick={e => setStyle(imageClick(e.screenX, e.screenY))} />
        </div>
    )
}

export default Main

标签： reactjs