在反应中显示悬停在特定卡片上

Question

我面临这个问题。我想在选择的这个框中显示悬停框。Fe 当我将鼠标悬停在框一上时，我想显示悬停一、框二 -> 悬停二。但在我的示例中，当我将鼠标悬停在“一”上时，两者都会显示。我试图用 refs 或 e.target 来做到这一点，但总是有些事情不是我想要的。链接到 stackblitz：https://stackblitz.com/edit/react-hc4741 ?file=src/App.jsimport React, { useState } from "react";import "./style.css";import { BooksSection, BookCard, BookCardHover } from "./Styled";export default function App() {  const [displayBookCardHover, setDisplayBookCardHover] = useState(false);  const showCardHover = () => {    setDisplayBookCardHover(true);  };  const hiddenCardHover = () => {    setDisplayBookCardHover(false);  };  return (    <div>      <BooksSection>        <BookCard          bgColor={"#000"}          color={"#fff"}          onMouseEnter={showCardHover}          onMouseLeave={hiddenCardHover}        >          <BookCardHover display={displayBookCardHover}>            Hover One          </BookCardHover>          Box One        </BookCard>        <BookCard          bgColor={"#fff"}          color={"#000"}          onMouseEnter={showCardHover}          onMouseLeave={hiddenCardHover}        >          <BookCardHover display={displayBookCardHover}>            Hover Two          </BookCardHover>          Box Two        </BookCard>      </BooksSection>    </div>  );}样式组件import styled from "styled-components";export const BooksSection = styled.div`  display: flex;  flex-direction: row;  flex-wrap: wrap;  width: 100wh;`;export const BookCard = styled.div`  width: 50%;  height: 500px;  padding: 20px 0;  background: ${props => props.bgColor};  color: ${props => props.color};  display: flex;  flex-direction: column;  justify-content: center;  align-items: center;  position: relative;`;export const BookCardHover = styled.div`  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  font-size: 50px;  background: rgba(0, 0, 0, 0.7);  visibility: ${({ display }) => (display ? "100" : "hidden")};`;

Answer 1

问题是你在两个地方都有完全相同的组件和完全相同的 prop 值，因此无论你对值做什么，它们都会同时显示/隐藏displayBookCardHover。

诀窍是为每个值使用单独的值。像这样：

const [hoverIndex, setHoverIndex] = useState(-1);

...

const showCardHover = (index) => {

  setHoverIndex(index);

}

const hiddenCardHover = () => {

  setHoverIndex(-1);

}

...

<BookCard

  ...

  onMouseEnter={() => showCardHover(0)}

  ...

>

  <BookCardHover display={hoverIndex === 0}>

...

<BookCardHover display={hoverIndex === 1}>

希望你能明白。

顺便说一句， prop 没有“100”值visibility。它要么是“隐藏的”，要么是“可见的”。

Answer 2

import React, { useState } from "react";

import "./style.css";

import { BooksSection, BookCard, BookCardHover } from "./Styled";

export default function App() {

  const [displayBookCardHover, setDisplayBookCardHover] = useState({

  boxOneHover: false,

  boxTowHover: false

});

const showCardHover = box => {

  if (box === 1) {

     setDisplayBookCardHover(ps=>({ ...ps, boxOneHover: true }));

  } else {

     setDisplayBookCardHover(ps=>({ ...ps, boxTowHover: true }));

  }

};

const hiddenCardHover = box => {

  if (box === 1) {

     setDisplayBookCardHover(ps=>({ ...ps, boxOneHover: false }));

  } else {

     setDisplayBookCardHover(ps=>({ ...ps, boxTowHover: false }));

  }

};

return (

 <div>

  <BooksSection>

    <BookCard

      bgColor={"#000"}

      color={"#fff"}

      onMouseEnter={() => showCardHover(1)}

      onMouseLeave={() => hiddenCardHover(1)}

    >

      <BookCardHover display={displayBookCardHover.boxOneHover}>

        Hover One

      </BookCardHover>

      Box One

    </BookCard>

    <BookCard

      bgColor={"#fff"}

      color={"#000"}

      onMouseEnter={() => showCardHover(2)}

      onMouseLeave={() => hiddenCardHover(2)}

    >

      <BookCardHover display={displayBookCardHover.boxTowHover}>

        Hover Two

      </BookCardHover>

      Box Two

    </BookCard>

  </BooksSection>

 </div>

 );

}

Answer 3

您的代码的问题是 - 两个BookCardHover组件都使用相同的参考状态来显示其状态displayBookCardHover，因此，当一个组件更改 的值时displayBookCardHover，它会自动反映在另一个组件上。

Answer 4

我认为BookCard应该是一个组件。每个人都应该有自己的状态。在 App.js 中，您可以使用 BookCard 并传递 bgColor 和 color 以及您想要自定义每个 BookCard 的任何内容作为 props 并在其中使用它们。