Я использую ant-design в качестве библиотеки дизайна в моем проекте. Я создал модальный компонент Image для показа изображения.
class ImageModal extends Component {
constructor(props) {
super();
this.state = {
showModal : props.showImage
}
}
closeModal = (e) => {
this.setState({ showModal : false })
}
render() {
return (
<Modal id='lajeet__modal' centered closable={true} visible={this.state.showModal} footer={null} width={900} height={700}
onCancel={(e) => this.closeModal(e)} onHide={this.close}>
<ImageInModal>
<img src={this.props.imageSrc} width={850} height={700} marginTop={50}></img>
</ImageInModal>
</Modal>
)
}
}
экспорт по умолчанию ImageModal;
При нажатии кнопки ниже, я открываю компонент Image Modal
{ !this.isStartingSession ? <FormButton type="ghost" onClick={(e) => this.setShowImageStateAndUrl(e, true, 'https://picsum.photos/800')}>View Check Out Image</FormButton> : '' }
Я вызываю этот компонент в каком-то другом компоненте как
{ this.state.checkInAndOutImageUrl ? <ImageModal showImage={this.state.showImage} imageSrc={this.state.checkInAndOutImageUrl}></ImageModal> : ''}
Функция, которую я использую для установки состояния,
setShowImageStateAndUrl = (event, value, imageSrc) => {
event.preventDefault();
this.setState({checkInAndOutImageUrl : imageSrc});
this.setState({showImage : value});
}