旋轉木馬 - 我如何選擇旋轉木馬項目並從選擇中打開模式

Question

我正在使用反應式自舉並使用旋轉木馬。要從選項選擇旋轉木馬項目和開放的模式，但未能如願任何幫助

Answer 1

我首先包裹Carousel.Item成分，並添加一個模式，然後單擊處理到包裝實例，類似也許下面

class Item extends Component { 
    constructor() { 
     super(); 

     this.state = { 
      show: false 
     }; 
    } 

    render() { 
     const { caption, title, src, alt, className, modal } = this.props; 

     return (
      <Carousel.Item> 
       <img 
        className={className} 
        src={src} 
        alt={alt} 
        onClick={e => this.setState({ show: true })} 
       /> 
       <Carousel.Caption> 
        <h1> 
         {title} 
        </h1> 
        <p> 
         {caption} 
        </p> 
       </Carousel.Caption> 

       {/* --> modal instance <-- */} 
       <Modal 
        show={this.state.show} 
        onHide={() => this.setState({ show: false })} 
       > 
        <Modal.Header closeButton> 
         <Modal.Title id="contained-modal-title"> 
          {modal.title} 
         </Modal.Title> 
        </Modal.Header> 
        <Modal.Body> 
         {modal.content} 
        </Modal.Body> 
        <Modal.Footer> 
         <Button onClick={() => this.setState({ show: false })}> 
          Close 
         </Button> 
        </Modal.Footer> 
       </Modal> 
       {/* --> end modal instance <-- */} 
      </Carousel.Item> 
     ); 
    } 
} 

接下來，我會在我的Carousel組件，如下

class MyCarousel extends Component { 
    constructor() { 
     super(); 

     this.state = { 
      items: [ 
       { 
        caption: "blah 1", 
        title: "blah 1", 
        src: "/path/to/image", 
        alt: "blah 1" 
       }, 
       { 
        caption: "blah 2", 
        title: "blah 2", 
        src: "/path/to/another/image", 
        alt: "blah 2" 
       } 
      ] 
     }; 

     this.renderItems = this.renderItems.bind(this); 
    } 

    renderItems() { 
     const { items } = this.state; 

     items.map(item => { 
      const modal = { 
       title: item.title, 
       content: item.caption 
      }; 

      return <Item key={item.title} {...item} modal={modal} />; 
     }); 
    } 

    render() { 
     return (
      <Carousel> 
       {this.renderItems()} 
      </Carousel> 
     ); 
    } 
}