购物车的 React.js 弹出模式答案

【问题标题】：React.js Popup modal for shopping cart购物车的 React.js 弹出模式
【发布时间】：2019-09-19 18:24:28
【问题描述】：

我目前正在处理购物车，我正在尝试弄清楚如何在单击购物车图标后显示模式。我已经查看了模态语义 UI 的文档，但是对于如何在单击某些内容时显示模态模态却含糊其辞。我正在使用语义-ui class="ui modal" 作为模态。

我正在考虑在图标上放置一个 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;

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

【问题讨论】：

我不确定，但您是否尝试过为Modal 保留某种state 并在用户单击Icon 时更改它？ Modal 具有 open 属性，您可以执行类似 <Modal open={this.state.show}>...</Modal> 的操作，并在用户单击图标时更改状态。如果问题是如何跨多个组件传递状态，那么首选的答案是您需要使用Redux 或某种状态管理器。

标签： javascript reactjs semantic-ui simplemodal

【解决方案1】：

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

这就是你应该如何一步一步地组织你的代码。

我们在 header.js 中渲染 cartIcon 组件。这是一个经典的标题

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 代码，因此您可以将其应用于您的项目。

cartDropdown 组件的 CSS

.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;
  }
}

【讨论】：