我尝试过让它发挥作用,但这就是发生的事情。
- 使用react-draggable npm 包,我能够使内容可拖动和可放置。但整个对话框的背面保持原位,之后看起来就破碎了。
我也在网上找到了这个https://gist.github.com/burgalon/870a68de68c5ed15c416fab63589d503 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} />
,我不明白为什么要送入道具以及送入什么样的道具。
And
<Modal dialogComponent={DraggableModalDialog} show={true} enforceFocus={false} backdrop="static" {...props}>
"<ModalDialog {...this.props} />"
?
如果这是一部有效的作品,谁能告诉我上述两个问题如何解决?
谢谢你!
对于任何可能仍在使用最新版本的人来说react-bootstrap
( 我的是1.0.0-beta.5
在写作时)。这是修改后的版本(https://gist.github.com/burgalon/870a68de68c5ed15c416fab63589d503 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>
);
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)