React组件中onMouseOver事件无法触发问题求助

你碰到的问题核心原因很明确：父组件传递的onMouseOver事件处理函数，子组件并没有接收并绑定到实际的DOM元素上，所以鼠标悬停时完全不会触发你写的逻辑。

修复步骤 #

1. 在子组件中接收并绑定onMouseOver props
   修改你的CookieDetails组件，先在props解构中加入onMouseOver，然后把它绑定到内部的容器div上：

   import React from 'react';
   const CookieDetails = ({ name, cost, value, numOwned, onMouseOver }) => {
     return (
       <React.Fragment>
         {/* 将onMouseOver绑定到实际的DOM元素上 */}
         <div className="cookie-details-wrapper" onMouseOver={onMouseOver}>
           <h3>{name}</h3>
           <p>Cost:{cost}</p>
           <p>Value:{value}</p>
           <p>Owned:{numOwned}</p>
         </div>
       </React.Fragment>
     );
   };
   export default CookieDetails;
   

2. 为什么这样有效？
   React组件的props不会自动向下传递给内部的DOM节点，你必须显式地把事件处理函数绑定到子组件中可交互的DOM元素上（这里就是.cookie-details-wrapper这个div）。这样当鼠标悬停在这个div的区域内时，就会触发你在父组件中定义的事件逻辑了。

额外优化建议 #

为了代码可读性，建议把父组件里的箭头函数抽成命名函数，避免JSX里嵌套过长的逻辑：

// 父组件中定义命名事件处理函数
const handleCookieHover = (event, cookie) => {
  console.log('cookies');
  if (numCookies < cookie.cost) {
    alert('Not Enough Cookies');
    return;
  }
  setPurchasedItems({
    ...purchasedItems,
    [cookie.id]: purchasedItems[cookie.id] + 1,
  });
  setNumCookies(numCookies - cookie.cost);
  console.log('purchased', purchasedItems[cookie.id], numCookies);
};

// 调用组件时传递事件
<CookieDetails
  key={cookie.id}
  name={cookie.name}
  cost={cookie.cost}
  value={cookie.cost}
  numOwned={purchasedItems[cookie.id]}
  onMouseOver={(e) => handleCookieHover(e, cookie)}
/>;

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