[英]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.