Модальное всплывающее окно React.js для корзины покупок

В настоящее время я работаю над корзиной для покупок и пытаюсь понять, как сделать так, чтобы модальное окно появлялось, когда я нажимаю на значок корзины для покупок. Я просмотрел документацию по семантическому пользовательскому интерфейсу для модальных окон, но неясно, как заставить модальное окно появляться при нажатии на что-либо. Я использую semantic-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;

В настоящее время у меня не работает функционал добавления товаров в корзину. Я просто хочу сосредоточиться на том, чтобы модальное окно отображалось, когда я нажимаю на значок корзины покупок.


reactjs simplemodal semantic-ui
person hannah    schedule 19.09.2019    source источник
comment
Я не уверен, но пробовали ли вы сохранить какой-то state для Modal и изменить его, когда пользователь нажимает на Icon? Modal имеет open поддержку, вы можете сделать что-то вроде этого <Modal open={this.state.show}>...</Modal> и изменить состояние, когда пользователь нажимает на значок. Если вопрос заключается в том, как передать состояние между несколькими компонентами, то предпочтительным ответом будет использование Redux или какого-либо менеджера состояний.   -  person Edward Chopuryan    schedule 19.09.2019

Ответы (1)


arrow_upward
0
arrow_downward

насколько я вижу, вы не используете ни редукс, ни контекстный API. вы проходите реквизит с бурением реквизита.

так вот как вы должны организовать свой код шаг за шагом.

мы визуализируем компонент cartIcon в header.js. вот классический заголовок

Заголовок.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>
);

здесь нам нужно добавить css для cartDropdown. Я не знаю, как вы справляетесь с вашим 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;
  }
}
person Yilmaz    schedule 17.12.2019