小编ssa*_*uif的帖子

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

所以我有这段代码不能按预期工作。当前焦点是在父组件上使用 useState() 设置的，因此它是一个状态变量。但是，当父级中的 currentFocus 值发生变化时，这里的焦点变量本身不会更新。我本来希望重新渲染父组件，而重新渲染该组件会导致 foucs 值发生变化。

import React, { useRef, useEffect, useState } from 'react';
const CookieDetails = props => {
  const {
    name,
    cost,
    value,
    numOwned,
    onMouseClick,
    cookieId,
    currentFocus,
  } = props;

  let cookieInfoRef = useRef(null);
  //My focus doesnt change even if I change currentFocus in parent component
  const [focus, setFocus] = useState(currentFocus);

  useEffect(() => {
    console.log('currentFocus', currentFocus);
    console.log('focus', focus);
    console.log('cookieID', cookieId); 
    if (cookieInfoRef.current && cookieId === focus) {
      console.log('current', cookieInfoRef.current);
      cookieInfoRef.current.focus();
    }
  }, [focus]);

  return (
    <React.Fragment> …