Question

我敲入了试图以模态主体显示产品而不显示的代码。当我单击图像时，它显示在控制台中，但不知道如何在模态主体中显示产品。为了以模式显示，我使用了react-bootstrap。当我单击图像时，将显示模式弹出窗口，并显示页眉和页脚。但是在模式主体中，我想显示单击的产品详细信息。谁能帮忙..

   import React, { Component } from "react";
   import { Grid, Row, Col, Image, Button, Modal } from "react-bootstrap";
   import AddToCartView from "./AddToCartView";
   // import ProductView from './ProductView';

   class ProductList extends Component {
   constructor(props){
   super(props);
   this.state = {
   show : false
  }
 }

  handleShow = (item) => { 
  this.getProductDetails(item);
  this.setState({
  show : true
  })
 }

handleClose = () => {
 this.setState({
 show : false
 })
}

getProductDetails = (prod) => {
//  console.log(id,'clicked');
console.log(prod);
console.log(prod.title);
console.log(prod.id);
console.log(prod.price);

// let click = document.getElementsByTagName(Image.id);
// console.log(click);

//  const { viewProducts } = this.props
//  console.log(viewProducts);

//  viewProducts.map((prod,id) => {
//    console.log(prod.ptype);
//  })

}
// console.log(viewProducts,'viewProducts');
render(){
const { viewProducts } = this.props;
return (
<div className="list-container">
  <div className="mobile-list">
    <h3> Showing { viewProducts.length } mobiles </h3>
  </div>
  <Grid>
    <Row>
      {viewProducts.map((item, key) => (
        <Col xs={8} md={4} lg={4}  key={item.id}>
          <figure>
            <Image onClick={() => this.handleShow(item) } src={item.image} 
     thumbnail />
            <figcaption>{item.title}</figcaption>
            <figcaption>
              <label>Rs. </label>
              {item.price}
            </figcaption>
          </figure>
          <Button bsStyle="primary"  onClick={this.props.onChange}>
            <i className="fa fa-shopping-cart" />
            Add
          </Button>
          <hr />
        </Col>
      ))}
    </Row>
  </Grid>
 <Modal show={this.state.show} onHide={() => this.handleClose()}>
      <Modal.Header closeButton>
        <Modal.Title>Product Details</Modal.Title>
  </Modal.Header>
  <Modal.Body>
    {/* <ProductView  displayProductView= { (item) => 
  this.props.displayProductDetails(item) }/> */}

  </Modal.Body>
  <Modal.Footer>
        <Button onClick={() => this.handleClose()}>Close</Button>
  </Modal.Footer>
</Modal>
</div>
 );
 };
}
export default ProductList;

Answer 1

您知道ProductView组件在模式主体中被注释掉了吗？

Answer 2

我看不到您将item传递到ProductView的位置。您的ProductView很可能什么都没显示。也许您可以将render中的ProductView更改为仅显示“ Hello”，以查看情况是否如此。

如何在模态车身上展示产品

2 个答案: