时间戳

首页 > 解决方案 > 点击图片后如何渲染 div？

reactjs - 点击图片后如何渲染 div？

问题描述

单击图像时，我正在尝试渲染一个框。根据用户单击的位置，我在框的呈现位置中有此代码。当我们取坐标时。但是每当我单击图像时，什么都没有发生。当我将这个 onClick 函数放在 img 标签中并单击图像时，整个页面完全空白。我希望根据用户单击的位置将框呈现在图像的不同部分

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) => {
    return `position: absolute;
    z-index: 2;
    border-radius: 2px solid red;
    border: 2px solid red;
    height: 50px;
    padding-left: 50px;
    margin-left: 1450px;
            left:${x}px;
            top:${y}px;`
  }

    return (
        <div id="frame">
          <div id="mainImage" style = {style} onClick={e => {
            const newStyle =
          imageClick(e.target.screenX,
                         e.target.screenY);

          setStyle(newStyle);
        }}></div>
          <img src={mainImage} className="marioBros____image" />
        </div>
    )
}

export default Main

标签： reactjs

解决方案

screenX并且screenY是MouseEvent的属性，而不是EventTarget.

改变 imageClick(e.target.screenX, e.target.screenY);

至

imageClick(e.screenX,e.screenY);

然后再试一次。

您可以验证e.target.screenX/e.target.screenY必须undefined在您记录它们时出现

此外，由于它是一个反应代码，您需要为您的 CSS 属性返回/设置有效style对象（newStyle必须是一个对象）和camelCase。

推荐阅读