小编Shi*_*iGi的帖子

如何在 React 中设置带有图像的模态弹出窗口

我在 React 中有一个 Image 类,并且有一个按钮应该在每个图像上实现单击扩展。我决定使用模态弹出窗口,因此当我单击时,图像将在模态弹出窗口中显示更大。我发现很难将模态设置为图像。

先感谢您。

这是来自ImageReact 中的类:

<FontAwesome
  className="image-icon"
  name="expand"
  title="expand"
  onClick={this.showModal}
/>
<Modal show={this.state.isExpand} handleClose={this.hideModal} />
Run Code Online (Sandbox Code Playgroud)

模态:

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>
  );
};
Run Code Online (Sandbox Code Playgroud)

javascript css modalpopupextender popup reactjs

5
推荐指数
1
解决办法
4万
查看次数

标签 统计

css ×1

javascript ×1

modalpopupextender ×1

popup ×1

reactjs ×1