React 在多个 div 上的 OnMouseEnter 无法正常工作

Question

我对 React 中的 onMouseEnter 有疑问。我只想展开一张卡片，当我将鼠标悬停在一张卡片上时，每张卡片都会同时展开。请帮忙。

export default function Modules() {

  const [isShown, setIsShown] = useState(false);

  return (
    <>
      <h5>title</h5>
      <Card>
        <div
          onMouseEnter={() => setIsShown(true)}
          onMouseLeave={() => setIsShown(false)}
        >
        <p>Tele</p>
        {isShown && (
          <div onMouseEnter={() => setIsShown(true)} onMouseLeave={() => setIsShown(false)}>
         <p>Logo</p>
         </div>
         </div>
        )}
      </Card>
           <h5>Title2</h5>
      <Card>
        <div
          onMouseEnter={() => setIsShown(true)}
          onMouseLeave={() => setIsShown(false)}
        >
        <p>Tele</p>
        {isShown && (
          <div onMouseEnter={() => setIsShown(true)} onMouseLeave={() => setIsShown(false)}>
         <p>Logo</p>
         </div>
         </div>
        )}
      </Card>```

Answer 1

发生这种情况是因为您使用的是相同的状态。如果 ifShown 为真，所有卡片都会显示。您可以创建一个独立的卡片组件来管理自己的状态。

export const CardWrapper = ({ title}) => {
   const [isShown, setIsShown] = useState(false);

   return (
      <>
      <h5>{title}</h5>
      <Card>
        <div
          onMouseEnter={() => setIsShown(true)}
          onMouseLeave={() => setIsShown(false)}
        >
        <p>Tele</p>
        {isShown && (
          <div onMouseEnter={() => setIsShown(true)} onMouseLeave={() => setIsShown(false)}>
         <p>Logo</p>
         </div>
         </div>
        )}
      </Card>
   )
}

然后在您的模块组件中使用它。现在每张卡独立管理自己的状态。我只将标题作为道具传递，因为现在不需要在卡片中使用什么。

export default function Modules() {
   return (
      <CardWrapper title="title1" />
      <CardWrapper title="title2" />
   )
}

React 在多个 div 上的 OnMouseEnter 无法正常工作

OnMouseEnter in React on multiple divs doesn't work properly

target

reactjs