时间戳

首页 > 解决方案 > onMouseOver() 函数不会在反应中触发

javascript - onMouseOver() 函数不会在反应中触发

问题描述

所以我想像这样在我的 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。任何帮助，将不胜感激

标签： javascriptreactjseventsreact-hooks

解决方案

CookieDetails不是 DOM 元素（因此它没有对事件的本机处理）它是您编写的组件。你不会对onMouseOver道具做任何事情。

您需要阅读该道具并将其附加到 DOM 元素（如div）。

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

推荐阅读