CartWidget 在悬停时显示产品

Question

我有一个购物车小部件，当我将鼠标放在 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;

这是购物车中的所有商品的 Cart.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