ReactJS函数组件onMouseOver事件中this返回undefined的原因

你遇到这个问题是JS基础规则+React组件运行特性共同导致的：

• 你写的Property是箭头函数定义的函数式组件，箭头函数本身没有独立的this绑定，只会继承定义位置外层作用域的this值
• React所有函数组件（包含普通function声明、箭头函数声明的组件）在默认开启的严格模式下，组件外层作用域的this本身就是undefined——函数组件根本没有组件实例，不会像类组件那样this指向组件实例
• 你可能见过原生JS事件回调里用this拿DOM的写法，那是非严格模式下原生JS给普通事件回调函数做的默认绑定，React的合成事件系统不会做这个绑定，你用箭头函数写回调+严格模式的运行环境，完全不满足这个绑定的生效前提，自然拿不到DOM，只会拿到undefined。

要获取当前绑定事件的DOM元素，不需要使用this，直接在事件回调里接收React合成事件对象，通过e.currentTarget属性就能拿到目标元素。
修改Property组件的事件绑定代码即可：

import React from "react";

const Property = ({ item }) => {
  return (
    <div
      style={{
        padding: "5px 0",
        cursor: "pointer"
      }}
      // 接收事件对象，通过currentTarget拿到绑定事件的DOM
      onMouseOver={(e) => console.log("当前悬停的DOM元素: ", e.currentTarget)}
    >
      {item.listing.name}
    </div>
  );
};

export default Property;

注意区分事件对象上的两个目标属性：

• e.currentTarget：永远指向绑定了当前事件的DOM元素，也就是你这里挂载onMouseOver事件的div，完全匹配你的需求
• e.target：指向实际触发鼠标悬停事件的元素，如果div内部嵌套了其他子元素（比如span、img标签），这个值可能是子元素而非外层绑定事件的div，按需选用即可。

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