reactjs 如何使react-bootstrap模型可拖动

46qrfjad 于 2023-01-04 发布在 React

关注(0)|答案(3)|浏览(164)

我试过让它工作，但这是发生了什么。
1.使用react-draggable npm包，我可以使内容变得可拖放，但是整个对话框的背面仍然在原来的位置，而且看起来是坏的。
我还在网上找到了这个

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} />

，我不明白为什么要送 prop ，送什么样的 prop 。
还有

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

〈------{... props}那是干什么的，看起来不像是在给Modal做 prop ，目的是什么，跟

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

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

reactjs

来源：https://stackoverflow.com/questions/45928675/how-to-make-react-bootstrap-modal-draggable

3条答案

按热度按时间

s1ag04yj1#

对于那些可能还在为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>
    );
}
}

赞(0）回复(0）举报 2023-01-04

jutyujz02#

我认为这个解决方案更简单，您可以使用整个模态头来拖动模态。

import { Modal, ModalHeader, ModalBody } from "reactstrap";
import Draggable from "react-draggable";

...

<Draggable handle=".handle">
  <Modal size="lg" toggle={function noRefCheck(){}}>
    <ModalHeader toggle={function noRefCheck(){}} className="handle">
      Modal Title
    </ModalHeader>
    <ModalBody>
      Modal Body
    </ModalBody>
  </Modal>
</Draggable>

赞(0）回复(0）举报 2023-01-04

q5lcpyga3#

我收到警告说findDOMNode is deprecated in StrictMode
我可以通过使用nodeRef而不是handle来解决这个问题。我的函数组件/typescript DraggableModalDialog如下所示：

/* eslint-disable react/jsx-props-no-spreading */
import React, { RefObject } from 'react';
import Draggable from 'react-draggable';
import ModalDialog, { ModalDialogProps } from 'react-bootstrap/ModalDialog';

export interface DraggableModalDialogProps extends ModalDialogProps {
  nodeRef?: RefObject<HTMLElement>;
}

function DraggableModalDialog({ nodeRef, ...props }: DraggableModalDialogProps) {
  return (
    <Draggable nodeRef={nodeRef}>
      <ModalDialog {...props} />
    </Draggable>
  );
}

export default DraggableModalDialog;

模态分量是这样的（这里稍微简化一下）：

import React, { useRef } from 'react';
import { Modal, Button } from 'react-bootstrap';
import DraggableModalDialog from 'components/DraggableModalDialog';

export interface MyModalProps {
  visible: boolean;
  onClose: () => void;
}

function MyModal({ visible, onClose }: MyModalProps) {
  const nodeRef = useRef<HTMLDivElement>(null);
  return (
    <Modal
      nodeRef={nodeRef}
      dialogAs={DraggableModalDialog}
      show={visible}
      centered
      size="lg"
      backdrop="static"
      onHide={onClose}
    >
      <Modal.Header ref={nodeRef}>
        <Modal.Title>TITLE</Modal.Title>
      </Modal.Header>
      <Modal.Body>BODY</Modal.Body>
      <Modal.Footer>
        <Button variant="primary" onClick={onClose}>CLOSE</Button>
      </Modal.Footer>
    </Modal>
  );
}

export default MyModal;

赞(0）回复(0）举报 2023-01-04

我来回答

reactjs 如何使react-bootstrap模型可拖动

3条答案

相关问题

热门标签

最新问答