旋转木马 - 我如何选择旋转木马项目并从选择中打开模式

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