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

Question

我面临这个问题。我想在选择的这个框中显示悬停框。Fe 当我将鼠标悬停在框一上时，我想显示悬停一、框二 -> 悬停二。但在我的示例中，当我将鼠标悬停在“一”上时，两者都会显示。我试图用 refs 或 e.target 来做到这一点，但总是有些事情不是我想要的。链接到 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

问题是你在两个地方都有完全相同的组件和完全相同的 prop 值，因此无论你对值做什么，它们都会同时显示/隐藏displayBookCardHover。诀窍是为每个值使用单独的值。像这样：const [hoverIndex, setHoverIndex] = useState(-1);...const showCardHover = (index) => {&nbsp; setHoverIndex(index);}const hiddenCardHover = () => {&nbsp; setHoverIndex(-1);}...<BookCard&nbsp; ...&nbsp; onMouseEnter={() => showCardHover(0)}&nbsp; ...>&nbsp; <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() {&nbsp; const [displayBookCardHover, setDisplayBookCardHover] = useState({&nbsp; boxOneHover: false,&nbsp; boxTowHover: false});const showCardHover = box => {&nbsp; if (box === 1) {&nbsp; &nbsp; &nbsp;setDisplayBookCardHover(ps=>({ ...ps, boxOneHover: true }));&nbsp; } else {&nbsp; &nbsp; &nbsp;setDisplayBookCardHover(ps=>({ ...ps, boxTowHover: true }));&nbsp; }};const hiddenCardHover = box => {&nbsp; if (box === 1) {&nbsp; &nbsp; &nbsp;setDisplayBookCardHover(ps=>({ ...ps, boxOneHover: false }));&nbsp; } else {&nbsp; &nbsp; &nbsp;setDisplayBookCardHover(ps=>({ ...ps, boxTowHover: false }));&nbsp; }};return (&nbsp;<div>&nbsp; <BooksSection>&nbsp; &nbsp; <BookCard&nbsp; &nbsp; &nbsp; bgColor={"#000"}&nbsp; &nbsp; &nbsp; color={"#fff"}&nbsp; &nbsp; &nbsp; onMouseEnter={() => showCardHover(1)}&nbsp; &nbsp; &nbsp; onMouseLeave={() => hiddenCardHover(1)}&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; <BookCardHover display={displayBookCardHover.boxOneHover}>&nbsp; &nbsp; &nbsp; &nbsp; Hover One&nbsp; &nbsp; &nbsp; </BookCardHover>&nbsp; &nbsp; &nbsp; Box One&nbsp; &nbsp; </BookCard>&nbsp; &nbsp; <BookCard&nbsp; &nbsp; &nbsp; bgColor={"#fff"}&nbsp; &nbsp; &nbsp; color={"#000"}&nbsp; &nbsp; &nbsp; onMouseEnter={() => showCardHover(2)}&nbsp; &nbsp; &nbsp; onMouseLeave={() => hiddenCardHover(2)}&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; <BookCardHover display={displayBookCardHover.boxTowHover}>&nbsp; &nbsp; &nbsp; &nbsp; Hover Two&nbsp; &nbsp; &nbsp; </BookCardHover>&nbsp; &nbsp; &nbsp; Box Two&nbsp; &nbsp; </BookCard>&nbsp; </BooksSection>&nbsp;</div>&nbsp;);}

Answer 3

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

Answer 4

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