CartWidget显示产品悬停

Question

我有一个cartwidget，当我把鼠标放在cartwidget上时，我想显示已经在购物车中的项目。我不知道如何实现这个代码。我只是创建了一个CartHover组件，其中包含函数和Cart.js组件。然后，我在CartWidget中添加CartHover。但是，什么也没发生。也许有人可以帮助我，用另一种方式在cartWidget上做悬停。这是CartHover:

import { useState } from "react";
import CartComponent from "../Cart/Cart";
const CartHover = () => {
const [show, setShow] = useState(false);
const showCart = (e)=>{
setShow(!show);
};
const hideCart = e => {
setShow(false);
};
return (
<>
<div>
<CartComponent
show={show}
onMouseEnter={showCart} 
onMouseLeave={hideCart}/>
</div>
</>
)
};
export default CartHover;

这是购物车。jsx哪里是购物车中的所有项目，我想在悬停中看到，也许有必要做一个更小的版本:

import { Table } from "react-bootstrap";
import { Link } from "react-router-dom";
import { useCartContext } from "../../Context/CartContext";
const CartComponent = () => {
const { list, totalPrice, deleteProd } = useCartContext();
return (
<>
<h1 className="py-4 text-center text-muted">
Cart
</h1>
{list.length > 0 ? (<Table striped hover className="text-muted">
<thead>
<tr>
<th>Product</th>
<th>Title</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
{list.map((varietal) => (
<tr key={varietal.id}>
<td>
<img
src={varietal.pictureUrl}
alt='img'
style={{ width: "82px" }}
/>
</td>
<td className="align-middle">{varietal.title}</td>                
<td className="align-middle">{varietal.count}</td>
<td className="align-middle">${varietal.price}</td>
<td className="align-middle"><button onClick={() => deleteProd(varietal)} className="badge badge-info">Remove</button></td>
</tr>
))}
</tbody>
<thead>
<tr className="font-weight-bold">
<td colSpan="3">Total</td>
<td>${totalPrice()}</td>
</tr>
</thead>
</Table>) : (<div className="py-5">
<h3 className="d-flex justify-content-center pt-5 text-muted">The Cart is empty</h3>
<p className="d-flex justify-content-center text-muted">
Return to home to see our products
</p>
<Link to='/' className="d-flex justify-content-center text-decoration-none"><button className="btn btn-info"> Home </button></Link>
</div>)}
</>
);
};
export default CartComponent;

这是导航栏:

import React from "react";
import { Navbar as NavbarBootstrap, Nav } from "react-bootstrap";
import { Link, NavLink } from "react-router-dom";
import CartHover from "../CartHover/CartHover";
import CartWidgetComponet from "../CartWidget/CartWidget";
import LogoComponent from "../Logo/LogoComponent";
const NavBar = () => (
<>
<NavbarBootstrap bg="light" variant="light">        
<Link to="/" className="text-decoration-none">
<NavbarBootstrap.Brand className="mx-5 px-5"><LogoComponent /> AIMARA</NavbarBootstrap.Brand>
</Link>
<Nav className="ml-auto">
<Link to="/" className="text-decoration-none text-dark">
<Nav className="mx-3">Aimara</Nav>
</Link>
<Link to="/category/red" className="text-decoration-none text-dark">
<Nav className="mx-3">Red Wines</Nav>
</Link>
<Link to="/category/white" className="text-decoration-none text-dark">
<Nav className="mx-3">White Wines</Nav>
</Link>
<Link to="/Contact" className="text-decoration-none text-dark">
<Nav className="mx-3">Contact</Nav>
</Link>
</Nav>
<NavLink to="/Cart" className="pl-3 pr-1 text-muted"><CartWidgetComponet><CartHover /></CartWidgetComponet></NavLink>
</NavbarBootstrap>
</>
);
export default NavBar;

这是CartWidgetComponent:

import { useCartContext } from "../../Context/CartContext";
const CartWidgetComponet = () => {
const { list, totalQuantity } = useCartContext();
return (
<>
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" className="bi bi-cart2" viewBox="0 0 16 16">
<path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l1.25 5h8.22l1.25-5H3.14zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
</svg>
{list.length > 0 ? (<span className="badge badge-info">{totalQuantity()}</span>) : null}
</>
);
};
export default CartWidgetComponet;

我希望有人能帮助我。欢呼声

Answer 1

我看到你正在使用React Boostrap。它有OverlayTrigger，你可以在这种情况下使用。这个想法是让你的CartHover元素为OverlayTrigger弹出窗口，这样无论什么触发它(悬停在我们的情况下)显示你的CardHover元素。下面是一些代码:

const CartHover = () => {
return (
<>
<div>
You have x number of items in your cart and here they are
<br />
Item 1
<br />
Item 2
</div>
</>
);
};
const CartIcon = () => {
const popover = (
<Popover>
<Popover.Content>
<CartHover />
</Popover.Content>
</Popover>
);
return (
<OverlayTrigger
trigger={["click", "hover"]}
rootClose={true}
placement={"bottom"}
overlay={popover}
>
<div className={"d-inline-block"}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="25"
height="25"
fill="currentColor"
className="bi bi-cart2"
viewBox="0 0 16 16"
>
<path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l1.25 5h8.22l1.25-5H3.14zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z" />
</svg>
<span className="badge badge-info">8</span>
</div>
</OverlayTrigger>
);
};
export default function App() {
return (
<div className="App">
<CartIcon />
</div>
);
}

沙箱:https://codesandbox.io/s/wizardly-shape-ow5wz?file=/src/App.js

Answer 2

不确定cartContext或cartWidget是什么样子。但在我看来，这里缺少一些代码，因此无法真正了解需要做些什么才能使其工作。特别是，我没有看到使用show属性来确定在cart组件中显示购物车的位置或不显示购物车的部分。

https://codesandbox.io/s/laughing-bogdan-fd5t1?file=/src/CartComponent.js