Reactjs 无法使用ref为鼠标事件附加事件侦听器以响应引导模式

无法使用ref为鼠标事件附加事件侦听器以响应引导模式

获取TypeError:Modal.addEventListener在尝试附加事件侦听器时不是函数

错误消息：

下面是示例代码：

import React, { useRef,useState,useEffect } from "react";
import {Button,Modal} from 'react-bootstrap';


function ExampleModal() {
    const [show, setShow] = useState(false);

    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    const cardRef = useRef(null);

   useEffect(()=>{
    const Modal = cardRef?.current;
    // ****TypeError: Modal.addEventListener is not a function*****
    Modal?.addEventListener("mousedown",mousedownhandler );
    return () => {

      // unsubscribe event
      Modal?.removeEventListener("mousedown", mousedownhandler);
    }}
   ,[])

  const mousedownhandler=()=>{console.log('mousedown on modal')}

    return (
      <>
        <Button variant="primary" onClick={handleShow}>
          Launch demo modal
        </Button>
  
        <Modal ref={cardRef} show={show} onHide={handleClose} >
          <Modal.Header closeButton>
            <Modal.Title>Modal heading</Modal.Title>
          </Modal.Header>
          <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={handleClose}>
              Close
            </Button>
            <Button variant="primary" onClick={handleClose}>
              Save Changes
            </Button>
          </Modal.Footer>
        </Modal>
      </>
    );
  }
  
  export default ExampleModal;

import React，{useRef，useState，useffect}来自“React”；
从“react bootstrap”导入{按钮，模式}；
函数exampleModel（）{
const[show，setShow]=useState（false）；
const handleClose=（）=>setShow（false）；
常量handleShow=（）=>setShow（true）；
const cardRef=useRef（null）；
useffect（（）=>{
const model=cardRef？电流；
//****TypeError:Modal.addEventListener不是函数*****
Modal？.addEventListener（“mousedown”，mousedownhandler）；
return（）=>{
//取消订阅事件
Modal？.removeEventListener（“mousedown”，mousedownhandler）；
}}
,[])
const mousedownhandler=（）=>{console.log（'mousedown on modal'）}
返回(
启动演示模式
模态标题
呜呜，你正在以模态的方式阅读这篇文章！
接近
保存更改
);
}
导出默认示例模式；

警报似乎是在模式中鼠标向下移动的过度简化结果，你到底想把一个引用附加到模态组件上做什么？我想把模态元素的引用传递到另一个组件上，在那里我可以把事件监听器附加到传递的模态引用上，这样我就可以实现任何传递的模态引用的拖动功能。你能帮帮我吗