为什么我在React图片点击事件中获取的newStyle是undefined？

错误原因 #

• 变量作用域不匹配：newStyle是imageClick函数的局部变量，函数外部无法直接访问，你调用imageClick后没有接收返回值就直接使用newStyle变量，因此抛出未定义错误。
• React的style属性格式错误：React不接收CSS字符串作为style属性值，需要传入驼峰命名的样式对象，你当前写的字符串格式完全无法被识别，同时内部样式分隔错用逗号、还存在border-radius: 2px solid red这类无效属性定义。
• 坐标取值不符合常规需求：screenX/screenY是相对于设备屏幕的坐标，如果你要实现点击图片哪里标记框就出现在哪里的效果，应该用相对于图片元素的offsetX/offsetY。

修复后代码 #

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

function Main() {
  // 初始值设为空对象符合React style属性要求
  const [style, setStyle] = useState({});

  const generateStyle = (x, y) => {
    // 返回React要求的样式对象，属性统一用驼峰命名
    return {
      position: 'absolute',
      zIndex: 2,
      borderRadius: '2px',
      border: '2px solid red',
      height: '50px',
      width: '50px', // 补充宽度才能正常展示边框框
      paddingLeft: '50px',
      // 固定marginLeft会偏移定位效果，不需要可以直接删除
      marginLeft: '1450px',
      left: `${x}px`,
      top: `${y}px`
    }
  }

  return (
    <div id="frame">
      <div id="mainImage" style={style}></div>
      <img 
        src={mainImage} 
        className="marioBros____image" 
        onClick={e => {
          // 接收函数返回的样式对象再更新状态
          const newStyle = generateStyle(e.offsetX, e.offsetY);
          setStyle(newStyle);
        }}
      />
    </div>
  )
}

export default Main

内容的提问来源于stack exchange，提问作者Chen