点击图片后如何渲染 div？答案

【问题标题】：How can you render a div after an image click?点击图片后如何渲染 div？
【发布时间】：2021-07-13 10:42:50
【问题描述】：

我正在尝试在单击图像时呈现一个框。根据用户单击的位置，我在框的呈现位置中有此代码。当我们取坐标时。但是每当我单击图像时，什么都没有发生。当我将这个 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

【解决方案1】：

试试这个可能对你有帮助，我只改变了 onClick 事件和 imageClick() 函数

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) => {

    let newStyle = `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;`

    setStyle(newStyle);

  }

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

export default Main

【讨论】：

【解决方案2】：

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。

【讨论】：