我面临这个问题。我想在选择的这个框中显示悬停框。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")};`;
4 回答
catspeake
TA贡献1111条经验 获得超0个赞
问题是你在两个地方都有完全相同的组件和完全相同的 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。它要么是“隐藏的”，要么是“可见的”。
达令说
TA贡献1821条经验 获得超6个赞
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>
);
}
FFIVE
TA贡献1797条经验 获得超6个赞
您的代码的问题是 - 两个BookCardHover组件都使用相同的参考状态来显示其状态displayBookCardHover，因此，当一个组件更改 的值时displayBookCardHover，它会自动反映在另一个组件上。
慕容森
TA贡献1853条经验 获得超18个赞
我认为BookCard应该是一个组件。每个人都应该有自己的状态。在 App.js 中，您可以使用 BookCard 并传递 bgColor 和 color 以及您想要自定义每个 BookCard 的任何内容作为 props 并在其中使用它们。
添加回答
举报
0/150
提交
取消