时间戳

首页 > 解决方案 > 如何使具有动态内容的reactstrap模态可调整大小和可拖动？

javascript - 如何使具有动态内容的reactstrap模态可调整大小和可拖动？

问题描述

我想用来自另一个组件的动态内容来制作 reactstrap 模式，它可以调整大小和拖动。

我的代码：

    <Draggable>
      <Modal isOpen={modal} toggle={this.toggle}>
        <ModalHeader toggle={this.toggle}>Add/Edit</ModalHeader>
        {modal ?
          <ModalBody>
            {this.props.dynamicComponent}
          </ModalBody> : ''}
      </Modal>
    </Draggable>

我已经通过使用实现了可拖动，react-draggable但我在调整大小时遇到​​了问题。我已经使用过react-resizable，re-resizable但是如果它们之前的<Resizable>标签<Draggable>甚至在打开模式之前和打开 Resizable 之后都创建了空间，则无法正常工作。

我已将<Resizable>标签放在 之后<Draggable>，Resizable 不起作用。

标签： javascriptreactjsdraggablereactstrapresizable

解决方案

我没有找到完整的答案，所以我决定删除 Draggable 并将 Resizable 添加到 Modal 中，因此我将这段 CSS 代码添加到了 modal 中：

.modal-content{
border: 2px solid;
resize: both;
overflow: auto;}

推荐阅读