動態顯示圖像的反應模式

Question

我使用反應建立應用程序，我有一個頁面，所有圖像都是動態顯示的。我希望這些圖像在點擊時以反應模式打開。如何設置的模式要顯示

我應該在模式設置的屬性的圖像，使之適用於所有圖像

Answer 1

class ImageModal extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     showModal: false 
    }; 
    } 

    setModalState(showModal) { 
    this.setState({ 
     showModal: showModal 
    }); 
    } 

    render() { 
    return (
     <div> 
     <img src={ this.props.src } onClick={ this.setModalState.bind(this, true) } /> 
     <ReactModal isOpen={ this.state.showModal }> 
      <img src={ this.props.src } onClick={ this.setModalState.bind(this, false) } /> 
     </ReactModal> 
     </div> 
    ) 
}