onMouseOver() 函数在react中不会触发

Question

所以我尝试在我的 React 组件上使用 onMouseOver，如下所示

<CookieDetails
  key={cookie.id}
  name={cookie.name}
  cost={cookie.cost}
  value={cookie.cost}
  numOwned={purchasedItems[cookie.id]}
  onMouseOver={event => {
    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);
  }}
/>;

这是我的组件现在的内容

import React from 'react';
const CookieDetails = ({ name, cost, value, numOwned }) => {
  return (
    <React.Fragment>
      <div className="cookie-details-wrapper">
        <h3>{name}</h3>
        <p>Cost:{cost}</p>
        <p>Value:{value}</p>
        <p>Owned:{numOwned}</p>
      </div>
    </React.Fragment>
  );
};

export default CookieDetails;

但是，当我将鼠标悬停在组件上时，什么也没有发生。事件控制台不记录 cookie。任何帮助，将不胜感激

Answer 1

CookieDetails不是 DOM 元素（因此它没有对事件的本机处理），它是您编写的组件。您无需对该onMouseOver道具执行任何操作。

您需要读取该 prop 并将其附加到 DOM 元素（如 ）div。

const CookieDetails = ({ name, cost, value, numOwned, onMouseOver }) => {
  return (
    <React.Fragment>
      <div onMouseOver={onMouseOver} className="cookie-details-wrapper">