React.js 购物车的弹出模式

Question

我目前正在研究购物车，我正在尝试弄清楚如何在单击购物车图标后显示模态。我已经查看了模态的语义-ui 的文档，但是关于如何在单击某些内容时显示模态是模糊的。我正在为模态使用语义-ui class="ui模态"。

我正在考虑在图标上放置一个 onClick，但仍然对如何从那里开始感到困惑。目前，我在另一个组件中有图标，在另一个单独的组件中有购物车。我希望商品出现在应该是购物车的弹出模式中。

import React from 'react'
import { Icon } from 'semantic-ui-react';

const ShoppingCartIcon = () => {



   return(

     <Icon.Group size='big' className="shopping_cart_icon">
       <Icon link name='shopping cart'/>
       <Icon corner='top right'/>
   </Icon.Group>
)


}
export default ShoppingCartIcon;


  import React from 'react'
  import Shirt from './Shirt';

   class ShoppingCart extends React.Component {

    render() {

   const listShirts = this.props.shirts.map(shirt => {
     return <Shirt key={shirt.id} {...shirt}/>
   })

   return(
     <div className="ui modal">
       <div className="content">
         {listShirts}
      </div>
     </div>
    )
   }

 }
 export default ShoppingCart;

目前，我还没有将商品添加到购物车的功能。我只想专注于在单击购物车图标后显示模态

Answer 1

据我所知，您既没有使用 redux 也没有使用上下文 api。你正在通过道具钻孔来传递道具。

这就是您应该逐步组织代码的方式。

我们在 header.js 中渲染 cartIcon 组件。这是经典header

Header.js

import CartDropdown from "../cart-dropdown/cart-dropdown.component";

class Header extends React.Component {
  constructor(props) {
    super(props);
    state = { hidden: true,       cartItems:[]};
  }
  toggleHidden() {
    this.setState(() => ({ hidden: !this.state.hidden }));
  }
  render() {
    return (
      <div className="header">
        <Link className="logo-container" to="/">
          <Logo className="logo" />
        </Link>
        <div className="options">
          <Link className="option" to="/shop">
            SHOP
          </Link>
          <Link to="/contact" className="option">
            CONTACT
          </Link>
          {/* <Link></Link> */}

          <CartIcon />
        </div>
        {hidden ? null : (
          <CartDropdown
            toggle={this.toggleHidden}
            cartItems={this.state.cartItems}
          ></CartDropdown>
        )}
      </div>
    );
  }
}

你说你还没有设置 addItem 功能。当您将项目添加到 cartItems 数组时，您将在购物车中显示它们。

现在我们需要设置 cartDropdown 组件。

const CartDropdown = ({ cartItems, toggleHidden }) => (
  <div className="cart-dropdown">
    <div className="cart-items">
      {cartItems.length ? (
        cartItems.map(item => <CartItem key={item.id} item={item} />)
      ) : (
        <span className="empty-message"> Your cart is empty </span>
      )}
    </div>
    <CustomButton
      onClick={() => {

        toggleHidden();
      }}
    >
      GO TO CHECKOUT
    </CustomButton>
  </div>
);

这里我们需要为 cartDropdown 添加 css。我不知道你是如何处理你的 css。 prop-types 或 scss 但这是 css 代码，因此您可以将其应用于您的项目。

css 用于 cartDropdown 组件

.cart-dropdown {
  position: absolute;
  width: 240px;
  height: 340px;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid black;
  background-color: white;
  top: 80px;
  right: 0;
  z-index: 5;
  .cart-items {
    height: 240px;
    display: flex;
    flex-direction: column;
    overflow: scroll;
  }
  .empty-message {
    font-size: 18px;
    margin: 50px auto;
  }
  button {
    margin-top: auto;
  }
}

React.js 购物车的弹出模式

React.js Popup modal for shopping cart

javascript

simplemodal

reactjs

semantic-ui