Блог

У меня проблема с OnMouseEnter в React. Я хочу развернуть только одну карту, и когда я навожу курсор на одну из них, каждая из них раскрывается одновременно. Пожалуйста, помогите.

 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 amp;amp; (
          <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 amp;amp; (
          <div onMouseEnter={() => setIsShown(true)} onMouseLeave={() => setIsShown(false)}>
         <p>Logo</p>
         </div>
         </div>
        )}
      </Card>```
 

Это происходит потому, что вы используете одно и то же состояние. Если значение ifShown равно true, все карты будут отображаться .. Вы можете создать независимый компонент Card, который управляет своим собственным состоянием.

 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 amp;amp; (
          <div onMouseEnter={() => setIsShown(true)} onMouseLeave={() => setIsShown(false)}>
         <p>Logo</p>
         </div>
         </div>
        )}
      </Card>
   )
}
 

Затем используйте его в своем компоненте Modules. Теперь каждая карта управляет своим собственным состоянием независимо. Я передаю заголовок только как реквизит, потому что не знаю, что вам нужно использовать внутри вашей карты.

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