如何使 react-bootstrap 模态可拖动

Posted 2023-05-08

【中文标题】如何使 react-bootstrap 模态可拖动

【英文标题】：how to make react-bootstrap modal draggable

【发布时间】：2018-02-06 07:04:10

【问题描述】：

我已经尝试过让它工作，但这就是发生的事情。

使用 react-draggable npm 包，我能够使内容可拖放。但是整个对话框的背面仍然存在，之后看起来就坏了。

我也在网上找到了这个 https://gist.github.com/burgalon/870a68de68c5ed15c416fab63589d503,

import  Modal  from 'react-bootstrap'
import ModalDialog from 'react-bootstrap/lib/ModalDialog'
import Draggable from 'react-draggable'

class DraggableModalDialog extends React.Component 
    render() 
        return <Draggable handle=".modal-title"><ModalDialog 
...this.props /></Draggable>
    


// enforceForce=false causes recursion exception otherwise....
export default (titleIconClass, modalClass, children, title,...props) =>
<Modal dialogComponent=DraggableModalDialog show=true enforceFocus=false backdrop="static" ...props>
    <Modal.Header closeButton>
        <Modal.Title>
            title
        </Modal.Title>
    </Modal.Header>
    <Modal.Body>
        children
    </Modal.Body>
</Modal>

我从四处搜索得到的这段代码，我实际上无法让它工作。

---

尤其是这个，

<ModalDialog ...this.props />

，我不明白为什么要发送道具以及发送什么样的道具。

还有

<Modal dialogComponent=DraggableModalDialog show=true enforceFocus=false backdrop="static" ...props>

有关

"<ModalDialog ...this.props />"

?

如果这是一个有效的工作，谁能给我提示以上两个问题如何工作？

谢谢！

【问题讨论】：

您是否阅读了全部要点？最后一条评论是你应该import Draggable from 'react-draggable';

是的，我也安装并导入了它..

所以用相关的更新代码更新问题并添加你得到的错误

但是你没有包括你得到的错误:(有人能帮忙吗？

T___T.. 我没有收到任何错误。它什么也没告诉我。我试图 console.log out 看看它是否有效，但它没有。我对从网上获得的这段代码感到非常困惑。我很难理解它

【参考方案1】：

对于任何可能仍在为最新版本的react-bootstrap 苦苦挣扎的人（我在写作时是1.0.0-beta.5）。这是(https://gist.github.com/burgalon/870a68de68c5ed15c416fab63589d503)的修改版

import React,  Component  from "react";
import Modal from "react-bootstrap/Modal";
import Draggable from 'react-draggable';
import ModalDialog from 'react-bootstrap/ModalDialog';

class DraggableModalDialog extends React.Component 
    render() 
        return <Draggable handle=".modal-title"><ModalDialog ...this.props /> 
   </Draggable>
    


export default class BSModal extends Component 

render() 
    return (
        <Modal
                dialogAs=DraggableModalDialog 
                show=this.props.show 
                onHide=this.props.close>
            <Modal.Header>
                <Modal.Title>this.props.title</Modal.Title>
            </Modal.Header>
            <Modal.Body>
                this.props.children
            </Modal.Body>
            <Modal.Footer >
            </Modal.Footer>
        </Modal>
    );

【讨论】：

有什么方法可以让整个标题可拖动，但仍然具有退出按钮功能，因为它包含在标题中？

@YoungScooter 我猜，它将基于.modal-title 类，所以如果一种快速方法是将width:100% 添加到.modal-title。