React中onClick事件用this获取img属性返回undefined的原因及解决方法

• 原生HTML内联onclick事件回调中，this默认绑定触发事件的DOM元素本身，这是浏览器原生事件处理机制的既定规则，因此你打印this可以拿到对应的img元素实例。
• React中你使用了箭头函数作为onClick的回调：箭头函数没有独立的this指向，会继承外层作用域的this。如果你是在函数组件内写这段代码，函数组件默认运行在严格模式下，顶层作用域的this本身就是undefined，因此最终打印结果为undefined；就算是在类组件中使用，箭头函数的this也会绑定到组件实例，而非目标DOM元素，和原生的打印结果也不一致。

方法1：通过事件对象获取 #

React的事件回调会默认传入合成事件对象，你可以直接访问它的target属性拿到触发事件的DOM元素，代码示例如下：

<img
  style={{ cursor: "pointer" }}
  title="Click to edit the diagram"
  onClick={(e) => console.log(e.target)}
  src="data:image/png" 
/>

方法2：通过Ref绑定获取 #

如果你需要频繁访问该img元素，也可以通过Ref直接绑定DOM节点，以函数组件为例，代码示例如下：

import { useRef } from 'react';

function ImageComponent() {
  // 创建ref存储DOM元素
  const imgRef = useRef(null);

  const handleImgClick = () => {
    // imgRef.current就是绑定的img元素实例，和原生获取的结果完全一致
    console.log(imgRef.current);
  };

  return (
    <img
      ref={imgRef}
      style={{ cursor: "pointer" }}
      title="Click to edit the diagram"
      onClick={handleImgClick}
      src="data:image/png" 
    />
  );
}

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