react simple-react-modal上的拖动元素不起作用

Question

我有一个模态，它是使用下面的带有标题和内容的simple-react-modal来创建的，我只想使用模态的头来拖动模态。

    import React, { Component } from 'react';
    import Modal from 'simple-react-modal'
    import { Dialog_Popup_Style, Dialog_Title, StringConstants } from '../../../utils/constants';
    import './ConfirmationModal.css';
    /**
     * component for displaying error dialog
     */
    export class ConfirmationModal extends Component {
        constructor(props){
            super(props);
        }            
        dragElement(elmnt) {
            var headerElement = document.getElementById("replace-modal-header");
            var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
            //elmnt.onmousedown = dragMouseDown;
            if (headerElement) {
                /* if present, the header is where you move the DIV from: */
                headerElement.onmousedown = dragMouseDown;
            } else {
                /* otherwise, move the DIV from anywhere inside the DIV:*/
                elmnt.onmousedown = dragMouseDown;
            }

        function dragMouseDown(e) {
            e = e || window.event;
            //  e.preventDefault();
            // get the mouse cursor position at startup:
            pos3 = e.clientX;
            pos4 = e.clientY;
            document.onmouseup = closeDragElement;
            // call a function whenever the cursor moves:
            document.onmousemove = elementDrag;
        }

        function elementDrag(e) {
            e = e || window.event;
            //e.preventDefault();
            // calculate the new cursor position:
            pos1 = pos3 - e.clientX;
            pos2 = pos4 - e.clientY;
            pos3 = e.clientX;
            pos4 = e.clientY;
            // set the element's new position:
            elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
            elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
        }

        function closeDragElement() {
            /* stop moving when mouse button is released:*/
            document.onmouseup = null;
            document.onmousemove = null;
        }
    }
    componentDidMount() {
        if (document.getElementById("replace-modal-header") && document.getElementById("replace-modal-header") !== null) {
           this.dragElement(document.getElementById("replace-modal-header"));
        }
      }

        render() {

            let dialogContent =
                <Modal show={this.props.show}
                style={{ 'background': 'rgba(0, 0, 0, 0.7)' }} containerClassName="replaceModal"
                    containerStyle={Dialog_Popup_Style}>
                    <div id="replace-modal-header" class="modal-header" onDrag={this.dragElement}>
                        <span class="modal-title" id="modal_message_Description">{StringConstants.ADHOC_RPT_WRITER}</span>
                    </div>
                    <span id="message-modal-content">
                        <p id="report_msg"> {this.props.msg} </p></span>                        
                </Modal>
            return (dialogContent)
        }
    }

通过在标题中添加'onDrag'道具，我试图拖动模式。我看不到模式的移动。有人可以帮助我吗，不确定我缺少什么