[英]How to set a Modal popup with an image in React
我在 React 中有一個 Image 類,我有一個按鈕,應該在每個圖像上實現單擊時展開。 我決定使用模態彈出窗口,所以當我點擊時,圖像會在模態彈出窗口中顯示得更大。 我發現很難將 Modal 設置為圖像。
先感謝您。
這是來自 React 中的Image
類:
<FontAwesome
className="image-icon"
name="expand"
title="expand"
onClick={this.showModal}
/>
<Modal show={this.state.isExpand} handleClose={this.hideModal} />
模態:
const Modal = ({ handleClose, show }) => {
const showHideClassName = show ? 'modal display-block' : 'modal display-none';
return (
<div className={showHideClassName}>
<section className="modal-main">
<button onClick={handleClose}>close</button>
</section>
</div>
);
};
試試這個示例代碼。 這是示例 ImageComponent https://codesandbox.io/s/4xnxqz0ylx的鏈接
export default class ImageComponent extends React.Component {
state = { isOpen: false };
handleShowDialog = () => {
this.setState({ isOpen: !this.state.isOpen });
console.log('cliked');
};
render() {
return (
<div>
<img
className="small"
src="/Anj.png"
onClick={this.handleShowDialog}
alt="no image"
/>
{this.state.isOpen && (
<dialog
className="dialog"
style={{ position: 'absolute' }}
open
onClick={this.handleShowDialog}
>
<img
className="image"
src="/Anj.png"
onClick={this.handleShowDialog}
alt="no image"
/>
</dialog>
)}
</div>
);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.