मैं वर्तमान में एक शॉपिंग कार्ट पर काम कर रहा हूं और मैं यह पता लगाने की कोशिश कर रहा हूं कि शॉपिंग कार्ट आइकन पर क्लिक करने के बाद मोडल कैसे दिखाई दे। मैंने मोडल के लिए सिमेंटिक-यूआई के लिए प्रलेखन को देखा है, लेकिन यह अस्पष्ट है कि किसी चीज़ पर क्लिक करते समय मोडल को कैसे प्रदर्शित किया जाए। मैं मोडल के लिए सिमेंटिक-यूआई क्लास = "यूआई मोडल" का उपयोग कर रहा हूं।

मैं आइकन पर एक ऑनक्लिक डालने की सोच रहा था लेकिन फिर भी उलझन में था कि वहां से कैसे जाना है। वर्तमान में मेरे पास दूसरे घटक में आइकन है और शॉपिंग कार्ट दूसरे अलग घटक में है। मैं चाहता हूं कि आइटम पॉप-अप मोडल के अंदर दिखाई दें जो शॉपिंग कार्ट होना चाहिए।

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;

वर्तमान में मेरे पास अभी तक काम कर रहे कार्ट में आइटम जोड़ने की कार्यक्षमता नहीं है। शॉपिंग कार्ट आइकन पर क्लिक करने के बाद मैं केवल मोडल को दिखाने पर ध्यान केंद्रित करना चाहता हूं

1
hannah 19 सितंबर 2019, 21:24

1 उत्तर

सबसे बढ़िया उत्तर

जहाँ तक मैं देख रहा हूँ, आप न तो redux और न ही संदर्भ एपीआई का उपयोग कर रहे हैं। आप प्रॉप्स ड्रिलिंग के साथ प्रॉप्स पास कर रहे हैं।

तो इस प्रकार आपको अपना कोड चरण दर चरण व्यवस्थित करना चाहिए।

हम हेडर.जेएस में कार्ट आइकन घटक प्रस्तुत करते हैं। यहाँ एक क्लासिक हेडर है

हैडर.जेएस

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 कार्यक्षमता सेट नहीं की है। जैसे ही आप कार्ट में आइटम जोड़ते हैं, आप उन्हें कार्ट में प्रदर्शित करेंगे।

अब हमें कार्टड्रॉपडाउन घटक सेट करने की आवश्यकता है।

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>
);

यहां हमें कार्टड्रॉपडाउन के लिए सीएसएस जोड़ने की जरूरत है। मैं नहीं जानता कि आप अपने सीएसएस से कैसे निपट रहे हैं। प्रोप-प्रकार या एससीएसएस लेकिन यहां सीएसएस कोड है ताकि आप अपनी परियोजना पर आवेदन कर सकें।

कार्ट ड्रॉपडाउन घटक के लिए सीएसएस

.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;
  }
}
0
Yilmaz 17 पद 2019, 23:28