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

Question

我正面临这个问题。我想在这个选中的框上显示悬停框。 F.e 当我将鼠标悬停在第一框上时，我想显示悬停一，第二框 -> 悬停二。但在我的示例中，当我将鼠标悬停在 One 上时，两者都会显示。我正在尝试使用 refs 或 e.target 来做到这一点，但总是有些事情不是我想要的。 Link 到 stackblitz：https://stackblitz.com/edit/react-hc4741?file=src/App.js

import 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

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

Answer 2

问题是你在两个地方有完全相同的组件和完全相同的 prop 值，所以无论你对 displayBookCardHover 值做什么，它们都会同时 shown/hidden .

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

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}>

希望你明白了。

附带说明一下，visibility 属性没有“100”值。它要么“隐藏”，要么“可见”。

Answer 3

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 4

您的代码的问题是 - BookCardHover 组件的显示状态都基于相同的参考状态 displayBookCardHover，因此，当一个组件更改 [=11= 的值时]，它会自动反映到另一个。我会推荐@technophyle 建议的方法来将它们分开。

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

Show hover on specific card in react

javascript

hover

reactjs